Redux Toolkit状态未更新，跳转页面后useSelector无法获取新状态

核心问题1：userSlice 中 reducer 写法错误 #

Redux Toolkit reducer 内直接对局部变量state赋值不会触发状态更新，仅修改局部变量指向，不会作用于真实的 store 状态。你可以选择两种合法写法修改状态：

• 方案1：直接返回新的状态值替换旧状态
• 方案2：逐个修改state对象的属性（适合仅修改部分字段的场景）

修复后的userSlice.js代码：

import { createSlice } from '@reduxjs/toolkit'

const initialState = {};

export const user = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setAuthUser: (state, action) => {
      // 替换原错误的state = action.payload写法
      return action.payload
    },
  }
})

// 导出action和reducer
export const { setAuthUser } = user.actions
export default user.reducer

核心问题2：跳转逻辑导致页面刷新，Redux状态丢失 #

你在跳转时同时调用了window.location和history.push，window.location会触发浏览器整页刷新，存储在内存中的Redux状态会被完全重置，跳转后自然无法拿到更新后的用户状态。

修复后的Login.js跳转逻辑：

const handleSubmit = useCallback((e) => {
    async function getUser(){
      return await login(username, password);
    }
    e.preventDefault();
    getUser()
    .then((userObj) => {
      if(userObj.user._id !== undefined){
        dispatch(setAuthUser(userObj.user));
        message.current.innerHTML = '';
        // 移除window.location跳转，仅保留前端路由跳转，不会刷新页面
        history.push('/Shops/Near/');
      }
      else{
        message.current.innerHTML = 'Invalid username or password, try again!';
      }
    });
  }, [username, password]);

额外检查项 #

确认你的Redux store已经正确注册user切片的reducer，且注册的key和useSelector中取值的key一致，示例：

// store.js
import { configureStore } from '@reduxjs/toolkit'
import userReducer from './userSlice'

export const store = configureStore({
  reducer: {
    // 此处key必须为user，和useSelector(state => state.user)对应
    user: userReducer
  },
})

内容的提问来源于stack exchange，提问作者Mai Fathy