Question

我有一个 React / Redux 项目，我在其中使用 Web Worker 来计算调度动作时的下一个状态，然后直接传递新状态到商店，像这样：

let nextReducer = reducer => {
    return (state, action) => {
        if (action.type === 'WEBWORKER') {
            return action.payload;
        } else {
            return reducer(state, action);
        }
    };
};

let store = createStore(nextReducer(rootReducer));

问题在于，当我手动将新状态传递给redux存储时，该状态现在有了新的引用，并且reselect库无法正确记住该状态。结果，视图总是在每次状态更改时重新呈现。

问题是，我一直认为状态总是有一个不同的引用（即使没有手动设置），因为规则是我们永远都不应改变原始状态对象，而必须始终返回一个新的对象。因此，为什么我按原样使用rootReducer时，reselect可以正常工作，但是手动设置时却不能呢？

Answer 1

react-redux的连接组件和reselect依靠对象引用相等性来防止不必要的渲染/重新计算。

在将对象发送给网络工作者时，the object is serialized, and later deserialized最终导致了对象的克隆，而该对象与原始对象没有任何引用相等性。< / p>

一种快速的解决方案可能是使用serviceWorker来评估您需要更新的特定状态分支（或值）。

还要考虑在非常特殊的情况下，reselect可以配置为perform custom deep equality checks，而react-redux connect的{{3}}也是如此。

由于引用相等性在redux体系结构中起着重要的作用，值得指出的是 JS身份运算符（===）与arrays，{{ 1}}和functions通过引用进行比较，同时比较objects和numbers（加上strings，undefined，null ）按值。

手动更新Redux状态时更改了Redux状态参考

1 个答案: