Сравнить предыдущее состояние

Question

В issue 303 в репозитории Redux Дан Абрамов дает пример функции, которая может обернуть метод 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

Проблема в том, что мой редуктор фактически не создавал новый экземпляр состояния, т. Е. Я искажал состояние на месте, а не возвращал новую копию. Мой редуктор код был что-то вроде:

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

Однако Object.assign и ES2015 деструктурирующего задания только делать мелких копий, то есть они влияют только на один уровень. В моем приложении состояние, которое я обновлял, было на три уровня. Я использовал быстрый, грязный, некрасивый хак в моем редукторе, чтобы проверить мою теорию:

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

Не попробовать, что у себя дома. Это был мой первый ключ. Правильная реализация будет использовать что-то вроде библиотеки Facebook Immutable, чтобы гарантировать, что каждая мутация приведет к новому клону.