时间戳

首页 > 解决方案 > 为什么这个 Redux 状态会发生变异？

javascript - 为什么这个 Redux 状态会发生变异？

问题描述

尽管结构在视觉上看起来相同，但我对 prevProps 和 this.props 评估不同时遇到了问题。我假设这与数组有关，但是即使在我的 reducer 中删除了对现有状态的任何更改后，问题仍然存在。在“设置”中有一个数组，但由于我没有在这里改变任何东西，我不明白为什么我的反应组件中的比较会失败，

case types.UPDATE_USER_SETTINGS_SUCCESS: {
    return {
        ...state,
        user: {
            ...state.user,
            settings: {
                ...state.user.settings,
            },
        },
    };
}

这是我用来比较 UNSAFE_componentWillReceiveProps 中状态的代码。

if (this.props.user.settings !== nextProps.user.settings) {
        console.log('is different');
    }

控制台日志每次都会触发，我无法弄清楚原因。开发工具显示相同的对象。

（我意识到减速器代码实际上不会改变任何东西，但我现在已经删除了动作有效负载以证明我仍然遇到同样的问题）

标签： javascriptreactjsreduxreact-redux

解决方案

如果我对您的理解正确，则在UPDATE_USER_SETTINGS_SUCCESS触发操作后，控制台日志中会出现“不同”。

这是可以预料的，因为您正在改变状态。在你的减速器中你写：

settings: {
   ...state.user.settings,
}

这意味着您实际上确实得到了一个新对象。这条线似乎没有做任何事情，所以如果你删除它，那么它应该可以按预期工作。注意：您不需要删除整个 reducer，因为即使您确实返回了一个新状态，其中一些字段引用了新对象，如果您删除设置传播，您将获得对settings.

PS 除了为某些字段返回不同的对象之外，就我所见，整个减速器没有做任何事情。这些值是相同的，但引用不同，所以你会得到!==真实的。

推荐阅读