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
  • alt.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