redux - 比较之前的状态

Question

在 issue 303在 Redux 存储库中，Dan Abramov 给出了一个函数示例，该函数可以包装存储的 subscribe 方法，以便将先前的状态传递给订阅者。

function observeStore(store, select, onChange) {
  let currentState;

  function handleChange() {
    let nextState = select(store.getState());
    if (nextState !== currentState) {
      currentState = nextState;
      onChange(currentState);
    }
  }

  let unsubscribe = store.subscribe(handleChange);
  handleChange();
  return unsubscribe;
}

出于某种原因，这对我不起作用。正如我所期望的，我的 onChange 处理程序第一次被调用 currentState 时是 undefined。但是，在每次后续状态更改时，currentState 的属性在值 (==) 上与 nextState 的属性相同。但这两个状态对象不是同一个对象，因为 nextState === currentState 的计算结果为 false。

我可能错过了一些非常明显的东西。如何捕获闭包中的先前状态？

Answer 1

问题是我的 reducer 实际上并没有创建状态的新实例，即我正在就地改变状态，而不是返回一个新副本。我的 reducer 代码是这样的:

const newState = Object.assign({}, state);
newState.my.prop = …;
return newState;

但是，Object.assign 和 ES2015 解构赋值仅进行浅复制，这意味着它们仅影响一层深度。在我的应用程序中，我正在更新的状态是三层深度。我在我的 reducer 中使用了一个快速、肮脏、丑陋的黑客来测试我的理论:

const newState = JSON.parse(JSON.stringify(state)); // <-- Yuck!
newState.my.prop = …;
return newState;

不要在家里尝试这个。不过，这是我的第一个线索。正确的实现应该使用 Facebook 的 Immutable 之类的东西。文库以确保每次突变都会产生新的克隆。