前段项目在Redux中关于immer重新计算属性值问题

Question

为了修改点击的模块导致id变化的函数changeSelectedId，在项目中设置的Redux store里面边写相关reducer函数如下:

changeSelectedId:produce((draft:ComponentsStateType,action:PayloadAction<string>)=>{
            draft.selectedId=action.payload
        }),

但是界面报错显示Cannot read properties of undefined (reading 'selectedId')
TypeError: Cannot read properties of undefined (reading 'selectedId')，就是识别不了我的seletedId，在相关组件添加了日志，控制台输出的selectedId都不是undefined，但代码就改成了:changeSelectedId:(state:ComponentsStateType,action:PayloadAction)=>{
state.selectedId=action.payload
}
改了之后就不报错了，请问有人知道是为什么吗?为什么这里用immer语法就报错呢?

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题解答

你在使用 Redux 和 Immer 时遇到了重新计算属性值的问题。具体来说，你想要在点击某个模块时，修改 changeSelectedId 函数，导致 id 变化。

你提供的 reducer 函数如下：

changeSelectedId: produce((draft) => {
  // todo
})

Immer 的 produce 函数可以帮助你在 reducer 中安全地更新状态树。

解决方案：

1. 使用 Immer 的 produce 函数来更新状态树。
2. 在 changeSelectedId 函数中，使用 draft 对象来更新状态树。
3. 使用 immer 的 draft 对象来重新计算属性值。

例如：

changeSelectedId: produce((draft) => {
  draft.selectedId = // 新的 id 值
})

这样，在 changeSelectedId 函数中，你可以安全地更新 selectedId 属性，并且 Immer 会自动重新计算相关的属性值。

如果你需要重新计算某个属性值，可以使用 immer 的 draft 对象来实现。例如：

changeSelectedId: produce((draft) => {
  draft.selectedId = // 新的 id 值
  draft.relatedProperty = // 重新计算相关属性值
})

这样，在 changeSelectedId 函数中，你可以重新计算 relatedProperty 属性值，并且 Immer 会自动更新相关的状态树。