如何在Redux或Redux Toolkit中更新嵌套对象？触发Edit Action时为selectedEmp对象赋值遭遇Immer错误求助

云原生阿岚

2026-4-28

解决Redux Toolkit中Edit Action的Immer错误问题

我帮你分析下问题所在，以及如何修正：

错误原因

Redux Toolkit（RTK）的reducers是基于Immer实现的，它允许你用"可变"的语法编写代码，但背后会自动转换成不可变的state更新。这里的核心规则是：在同一个reducer里，你要么直接修改Immer提供的draft state（不返回任何值），要么返回一个全新的state对象，绝对不能同时做这两件事。

你的原代码里，先执行了state.users.splice(index, 1, { ...obj, selectedEmp: empObj })修改了draft，又返回了{ ...state, users: newUsers }，这种混合操作直接触发了Immer的错误。

修正方案（推荐使用Immer的简洁写法）

直接修改draft state即可，不需要手动拼接新数组或返回新对象：

edit: (state, action) => {
  // 找到当前登录的用户对象
  const currentUser = state.users.find(user => user.id === state.currentUser);
  
  if (currentUser) {
    // 根据payload找到要编辑的员工
    const targetEmp = currentUser.emps.find(emp => emp.id === action.payload);
    // 直接修改currentUser的selectedEmp属性，Immer会自动处理不可变更新
    currentUser.selectedEmp = targetEmp || {};
  }
}

另一种纯不可变写法（不用Immer的可变语法）

如果你更习惯传统的不可变更新方式，也可以直接返回全新的state对象：

edit: (state, action) => {
  return {
    ...state,
    users: state.users.map(user => {
      // 只更新当前登录用户的数据
      if (user.id === state.currentUser) {
        const targetEmp = user.emps.find(emp => emp.id === action.payload) || {};
        return { ...user, selectedEmp: targetEmp };
      }
      // 其他用户保持原样
      return user;
    })
  };
}