Прослушайте конкретное изменение свойства магазина

Question

У меня есть компонент, начальное состояние которого установлено равным состоянию магазина. Также Компонент подписывается на любые изменения, происходящие в Магазине.

// Inital component's state is set to be equal to a Store state
constructor(props) {
    super(props);
    this.state = EntityStore.getState();
    this.entitiesOnChange = this.entitiesOnChange.bind(this);
}

// Subscribe to any Store's change
componentDidMount() {
    EntityStore.listen(this.entitiesOnChange);
}

// Update the state with the new one
entitiesOnChange(nextState) {
    this.setState(nextState);
}

Моя цель - подписать Компонент на определенное свойство Магазина.

Я пытался проверить в entitiesOnChange, но я узнаю, что this.state уже в курсе состояния магазина (nextState). Также в следующем примере кода (что я пробовал) this.setState(nextState) не вызывается, потому что оба состояния равны, поэтому повторное рендеринг не происходит:

// Update the state with the new one only if a specefic `propery` is changed
entitiesOnChange(nextState) {
    // Here is the problem. `this.state` is already up to date.
    if (this.state.property !== nextState.property) {
        this.setState(nextState);
    }
}

Итак, как я могу подписать мой компонент на свойство конкретного магазина?

Answer 1

Хорошо! Я глубоко исследовал проблему и, наконец, я выяснил, что происходит. Проблема была вызвана неправильным способом установки данных в магазине. Он был видоизменен (что неправильно). Правильный (поток) способ создания нового объекта.

Я создал JSFiddle, чтобы проиллюстрировать всю проблему, но вот основные моменты неправильной мутации в Магазине:

class Store {
    constructor() {
        this.bindActions(actions);
        this.data = {
            items: [],
            isLoading: false
        };
    }

    set(items) {
        this.data.isLoading = true;

        // Simulate API call
        setTimeout(() => {
            this.data.items = items;
            this.data.isLoading = false;
            this.setState(this);
        }, 2000);

        this.setState(this);
    }
}