使用Redux更新用户资料时遇‘user’ reducer键错误求助

问题根源 #

你的代码存在两处核心问题，导致了这个错误：

1. 状态结构嵌套冗余：slice的初始状态额外嵌套了一层user对象，而store已经将该reducer挂载在user键下，最终store中的状态结构变成了{user: {user: {...}}}，Redux无法识别这种冗余结构，因此抛出错误。
2. reducer赋值逻辑错误：你在reducer中直接给state.email赋值，但原初始状态中state是包含user子对象的外层对象，state.email根本不存在，导致更新逻辑完全无效。

修复方案 #

1. 修正slice的初始状态

去掉初始状态中外层多余的user键，直接将用户信息对象作为初始状态：

const initialUserState = {
  email: '',
  name: '',
  phoneNumber: '',
  isAdmin: false,
};

2. 修正reducer的更新逻辑

现在state直接指向用户信息对象，你可以直接修改对应的属性（Redux Toolkit的Immer会自动处理不可变更新）：

const UserSlice = createSlice({
  name: 'user',
  initialState: initialUserState,
  reducers: {
    // 建议把reducer名称改得更语义化，比如setUserProfile
    setUserProfile(state, action) {
      state.email = action.payload.email;
      state.name = action.payload.name;
      state.isAdmin = action.payload.isAdmin;
      state.phoneNumber = action.payload.phoneNumber;
      // 或者用更简洁的写法一次性覆盖：
      // Object.assign(state, action.payload);
    },
  },
});

3. 保持store代码不变

你的store配置是正确的，不需要修改：

import {configureStore} from '@reduxjs/toolkit';
import userProfileReducer from './slices/user';

const store = configureStore({
  reducer: {
    user: userProfileReducer,
  },
});

export default store;

验证修复效果 #

修复后，store中的user状态会直接是用户信息对象（{email: "", name: "", ...}），当你调用userActions.setUserProfile(...)时，就能正确更新用户资料，同时错误提示会消失。

内容的提问来源于stack exchange，提问作者Jason Byron Beedle