Redux Toolkit调用API成功后无法直接覆盖更新state的问题求助

问题成因 #

Redux Toolkit 的 createSlice 内部默认集成了 Immer 库，reducer（包括 extraReducers）中拿到的 state 参数是 Immer 生成的草稿代理对象，而非真实的状态对象。

你写的 state = { ...action.payload } 只是修改了函数内部局部变量 state 的引用指向，完全没有修改原草稿代理对象的内容，Immer 检测不到本次更新操作，自然不会生成新的状态，所以表现为状态更新失败。单独修改 state 上的属性是直接操作草稿代理对象，Immer 可以正常追踪到改动，因此可以生效。

解决方案 #

有两种通用的解决方式，都不需要逐个声明属性赋值：

• 方式1：直接返回新的状态对象
  Immer 支持直接返回全新的不可变对象作为最终的新状态，不需要赋值给 state 变量，示例代码如下：

builder.addCase(loginUser.fulfilled, (state, action) => {
  return { ...action.payload }
})

• 方式2：批量合并属性到草稿对象
  可以用 Object.assign 把 payload 所有属性批量合并到当前草稿对象上，Immer 可以正常追踪这一改动：

builder.addCase(loginUser.fulfilled, (state, action) => {
  Object.assign(state, action.payload)
})

注意：不要同时修改草稿对象属性又返回新对象，会导致Immer处理异常。

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