React-Redux中Immer报错问题及状态更新方案咨询

报错原因分析 #

这个报错是因为Redux Toolkit的createSlice默认使用Immer管理状态更新，Immer有严格规则：reducer要么只修改draft对象，要么返回一个全新的状态对象，不能同时操作两者。

看你的代码：

• let newArray = [...state.value];是数组浅拷贝，数组内的电影对象还是和原state共享引用，修改newArray[i].displayOneMovie本质是在修改Immer提供的draft代理对象。
• 最后又返回{...state, value: newArray}，相当于同时做了修改draft和返回新值两件事，触发Immer的规则校验错误。

可行的状态更新方法 #

方法一：纯返回全新状态（不修改draft） #

对数组内的每个对象做浅拷贝，生成完全独立的新数组，最后返回全新的state对象：

showSelectMovieForEdit: (state, action) => {
  const newArray = state.value.map(movie => ({
    ...movie,
    displayOneMovie: movie.id === action.payload
  }));
  return { ...state, value: newArray };
}

方法二：使用Immer的draft修改模式（不返回新值） #

直接修改draft对象的属性，不需要返回任何值，Immer会自动处理不可变更新，这也是Redux Toolkit推荐的写法：

showSelectMovieForEdit: (state, action) => {
  state.value.forEach(movie => {
    movie.displayOneMovie = movie.id === action.payload;
  });
}

方法二更简洁高效，无需手动处理对象拷贝，完全利用Immer的特性完成不可变更新。

内容的提问来源于stack exchange，提问作者Theow Meng Ang