React-Redux Reducer出现意外错误：状态修改问题排查

嘿，我明白你遇到的问题了——明明用Object.assign({}, state)创建了新的state对象，结果redux-immutable-state-invariant还是抛出异常，对吧？问题出在浅拷贝的局限性上，咱们一步步拆解：

你的代码为什么会触发异常？ #

你写的这段代码：

let newState = Object.assign({}, state);
let newData = [];
newState.data.map(function(rec){
  if (rec.id === sessionId) {
    // 这里如果直接修改rec的属性，比如 rec.status = 'updated'
  }
  // ...
})

存在两个关键问题：

1. Object.assign({}, state)是浅拷贝：它只会复制state对象的第一层属性，所以newState.data仍然和原state.data指向同一个数组，并没有创建新的数组引用。
2. 如果在map回调里直接修改rec的属性（比如rec.someKey = newValue），因为数组里的元素是对象（引用类型），你修改的其实是原状态里的对象实例，这直接违反了Redux的immutable状态原则——这就是redux-immutable-state-invariant报警的原因。

正确的Immutable状态修改方式 #

要彻底解决这个问题，需要做到两点：

• 为data数组创建新的引用（而不是复用原数组）
• 对需要修改的那条记录，创建一个全新的对象（而不是修改原对象）

修正后的代码示例：

function yourReducer(state, action) {
  // 假设action里带有sessionId和要更新的属性
  const { sessionId, updatedProps } = action.payload;
  
  // 浅拷贝state对象
  const newState = { ...state };
  // 用map创建新的data数组，仅修改目标记录
  newState.data = state.data.map(rec => {
    if (rec.id === sessionId) {
      // 返回全新的对象，合并原属性和新属性
      return { ...rec, ...updatedProps };
      // 也可以用Object.assign: return Object.assign({}, rec, updatedProps);
    }
    // 未修改的记录直接返回原对象，避免不必要的复制
    return rec;
  });
  
  return newState;
}

核心原理说明 #

• 使用扩展运算符{ ...state }（或Object.assign({}, state)）浅拷贝state对象，保证state本身是新引用。
• 通过map方法生成新的data数组，替换掉newState里的原data引用——这样数组本身是新的。
• 对于需要更新的记录，用{ ...rec, ...updatedProps }创建新对象，原对象完全不受影响，彻底遵守immutable规则。

这样修改后，redux-immutable-state-invariant就不会再抛出异常啦。

内容的提问来源于stack exchange，提问作者Peter Kellner