首页 > 解决方案 > 即使 action/reducer 没有更改该值,状态值也会更改

问题描述

我正在使用相同的操作有效负载在具有相同内容的状态上设置两个不同的值。

这样我就可以在原始数据发生任何变化之前获得原始数据,并最终对它们进行比较,例如:

onLoadUserDataSuccess

userData: action.payload
originalUserData: action.payload

问题是,当我有一个更新用户数据但只更改 userData 值而不是 originalUserData 的操作时,我可以在 devtools 中看到两者都发生了变化。例子:

onUserDataUpdate

userData: action.payload

我能想象的唯一原因是,这是通过引用处理的?那么当 userData 值改变时 originalUserData 会自动改变吗?

我还尝试使用 WillMount 钩子将这些原始数据保存在组件状态中,但是如果我同时加载其他用户,因为组件不会重新安装,所以这不起作用,所以数据来自加载的第一个用户。

标签: reactjsreduxreferencestateaction

解决方案


正如预期的那样,经过大量阅读后,问题在于数组和对象是通过引用处理的,并且在处理动作有效负载时使用 react 和 redux 需要格外小心。

解决方案是创建一个函数,该函数将在每个嵌套级别上返回一个新状态。

这也可以通过 Immutable.js 和 immer 等其他库来完成。

更多关于不可变更新模式的信息在这里


推荐阅读