React Redux报错：dispatch内检测到状态突变，求排查帮助

我尝试用dispatch()修改React Redux状态，为保证状态不可变，使用扩展运算符(...)复制对象进行修改，但仅当事件为"user-changed-channel"时，出现「A state mutation was detected inside a dispatch」错误。已检查dispatch传入参数及updateChannels返回值均正常，但保存状态时仍出问题。相关代码如下：

Channels Reducer代码 #

export default function channels(state = initialState, action) {
  // console.log(action);
  switch (action.type) {
    case SETCHANNELS: {
      if (action.event === "user-changed-channel") {
        // return { ...state, channels: {} };
      }

      const {
        event,
        socketId,
        sender,
        originChannel,
        new_channels,
        changed_channel,
      } = action;
      const obj = updateChannels({
        new_channels,
        event,
        socketId,
        sender,
        originChannel,
        changed_channel,
        state,
      });
      return { ...state, channels: obj };
    }
    default:
      return { ...state };
  }
}

updateChannels函数代码 #

//updateChannels function
export function updateChannels({
 event,
 new_channels,
 originChannel,
 state,
 changed_channel,
sender,
}) {
 if (event === "init") {
   return new_channels;
 }

 if (event === "user-changed-channel") {
  const obj = { ...state.channels };
   if (originChannel !== null && originChannel !== undefined) {
    const members = { ...obj[originChannel]["members"] };
     delete members[sender.socketId];
     obj[originChannel]["members"] = members;
   }
   obj[changed_channel].members[sender.socketId] = sender;
   return obj;
  }
}

错误原因 #

问题出在updateChannels函数的"user-changed-channel"分支中的浅拷贝遗漏：

• const obj = { ...state.channels }是浅拷贝操作，仅复制了channels对象的第一层键值对，obj[changed_channel]仍然直接引用原state.channels中的对应channel对象，没有创建新的副本。
• 执行obj[changed_channel].members[sender.socketId] = sender时，直接修改了原state中该channel的members对象，违反了Redux状态不可变的核心原则，触发了mutation检测错误。

而处理originChannel时，你正确复制了members对象并替换回去，但changed_channel的处理遗漏了创建副本的步骤，直接修改了原引用对象。

修复方案 #

处理changed_channel时，需要逐层创建对象副本，确保所有修改都基于新对象而非原state引用：

if (event === "user-changed-channel") {
  const obj = { ...state.channels };
  if (originChannel !== null && originChannel !== undefined) {
    // 复制originChannel的members并替换整个channel对象
    const updatedOriginMembers = { ...obj[originChannel].members };
    delete updatedOriginMembers[sender.socketId];
    obj[originChannel] = {
      ...obj[originChannel],
      members: updatedOriginMembers
    };
  }
  // 复制changed_channel对象及其members，添加新成员后替换回去
  const updatedChangedMembers = {
    ...obj[changed_channel].members,
    [sender.socketId]: sender
  };
  obj[changed_channel] = {
    ...obj[changed_channel],
    members: updatedChangedMembers
  };
  return obj;
}

这样所有修改都基于新创建的对象副本，不会触碰原state的任何引用，完全符合Redux的状态不可变要求。

内容的提问来源于stack exchange，提问作者이준희