Flux / Alt не обновляет реквизит из магазина

Я пытаюсь повторно отобразить свой компонент React с новыми реквизитами, полученными из магазина, но реквизиты, похоже, не обновляются. У меня этот подход нормально работает, только в данном случае нет.

Компонент

class Cart extends React.Component {

    static getStores() {
        return [CartStore];
    }

    static getPropsFromStores() {
        return CartStore.getState();
    }

    componentDidMount() { // tried componentWillMount also
        CartActions.updateCart();
    }

    render() {
        console.log(this.props.cart); // empty object

        return (
            <div className="cart">
                {this.props.cart.map((item, i) => <div key={i}>{item.get('name')}</div>)}
            </div>
        );
    }

}

export default connectToStores(Cart);

Действия

class CartActions {

    updateCart() {
        this.dispatch();
    }

}

export default alt.createActions(CartActions);

Магазин

class CartStore {

    constructor() {
        this.bindActions(CartActions);

        this.cart = Immutable.fromJS([]);
    }

    updateCart() {
        this.cart = Immutable.fromJS(JSON.parse(localStore.getItem('cart')));
        console.debug('cart', this.cart); // returns the correct object
    }

}

export default alt.createStore(CartStore, 'CartStore');

Хранилище получает событие действия и извлекает правильный объект из localStorage. Однако свойства компонента не обновляются, как обычно.

Любая помощь приветствуется! Спасибо :)

Версии

  • Реагировать 0.14.3
  • альт.js 0.17.9

reactjs javascript flux immutable.js alt
person Rico Herwig    schedule 30.12.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно прослушивать ваш магазин где-то в вашем представлении, обычно это componentDidMount, также, если вы рендерите что-то из магазина и оно изменится, оно должно либо исходить от компонента более высокого порядка, либо просто становиться состоянием. В этом случае лучше подходит переменная состояния.

Итак, что-то вроде этого будет работать

componentDidMount () {
  CartStore.listen(this.onChange)
  CartActions.updateCart()
}

onChange () {
  this.setState({
    xxx: xxxx
  }) // or change props like yours if you insist 
}

render() {
    return (
        <div className="cart">
            {this.state.cart.map((item, i) => <div key={i}>{item.get('name')}</div>)}
        </div>
    );
}
person yujingz    schedule 30.12.2015
comment
Реализация Flux alt.js делает это за меня. Об этом позаботится метод connectToStores. Как я уже сказал, это работает, если я, например, запрашиваю API. А вот с localStore как-то не так. - person Rico Herwig; 31.12.2015
comment
Этот метод работает, однако он предотвращает истинный изоморфный рендеринг, на сервере и клиенте генерируются разные хэши. - person Don P; 08.01.2016
comment
Этот вопрос старый, но сейчас у меня такая же проблема, я использую connectToStores, я вижу, что магазин получает действие, но представление не обновляет состояние. - person elaich; 26.08.2017