javascript - 手动更新 redux 状态时更改了 redux 状态引用

Question

我有一个 React/Redux 项目，我在其中使用 Web Worker 来计算分派(dispatch) Action 时的下一个状态，然后直接传递新状态去商店，像这样:

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 库无法正确内存状态。这导致 View 总是在每次状态更改时重新呈现。

问题是我一直认为状态总是有一个不同的引用(即使没有手动设置它)，因为规则是我们永远不应该改变原始状态对象，但我们必须总是返回一个新的。那么，为什么如果我按原样使用 rootReducer，reselect 工作正常，但手动设置时却不行？

Answer 1

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

向网络 worker 发送对象时，the object is serialized, and later deserialized ，因此您最终得到一个对象的克隆，与原始对象缺少任何引用相等性。

一个快速的解决方案可能包括使用 serviceWorker 仅评估您需要更新的特定状态分支(或值)。

还要考虑在非常特殊的情况下，reselect 可以配置为 perform custom deep equality checks , react-redux connect 的 mapStateToProps configuration 也是如此.

由于引用相等性在 redux 架构中起着重要作用，值得指出的是 JS identity operator (===) 比较arrays, functions and objects by reference 同时比较numbers 和strings (加上 undefined、null、boolean)按值。