Redux赋值新对象未触发React重渲染问题及优化方案咨询

为什么第二段代码无法触发重渲染？ #

Redux Toolkit里的state是Immer库创建的代理对象，目的是让你能用"可变"写法实现不可变状态更新。当你执行state = {...state, ...action.payload}时，相当于把原来的代理对象替换成了普通新对象，之后修改state.error和state.loading都是在这个普通对象上操作，Immer根本没追踪到这些变化，自然不会生成新状态，React也就感知不到更新，不会触发重渲染。

正确的合并对象并触发重渲染的写法 #

写法一：直接返回完整的新状态对象

直接把原状态、payload字段，以及需要手动设置的error和loading合并成新对象返回，这是标准的不可变更新写法：

builder.addCase(fetchGameInfo.fulfilled, (state, action) => {
  return {
    ...state,
    ...action.payload,
    error: "",
    loading: "idle"
  };
});

写法二：用Object.assign在代理state上合并

利用Immer允许对代理对象做可变操作的特性，用Object.assign把payload字段合并到原state上，再修改其他字段：

builder.addCase(fetchGameInfo.fulfilled, (state, action) => {
  Object.assign(state, action.payload);
  state.error = "";
  state.loading = "idle";
});

这两种写法都能让Redux正确识别状态变化，触发React组件重渲染，而且不用手动逐个复制键值对。

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