Как правильно инициализировать магазин реквизитами компонента

Я относительно новичок в React/Reflux, так что извините, если это глупый вопрос. У меня есть компонент React, который я хочу много раз использовать в своем приложении. Я хотел бы инициализировать состояние этого компонента с помощью реквизита. Как я могу установить начальное состояние моего магазина с реквизитами моего компонента с помощью Reflux? Я читал в документе ReactJS, что это может быть анти-шаблон, но я думаю, что в моем случае это не так.

Я попробовал приведенный ниже код, но он дважды отображает мой компонент, так как я установил новое состояние для функции ComponentDidMount.

Я понятия не имею, как передать реквизиты моего компонента в мой магазин при инициализации.

Родительский компонент:

var ParentComponent = React.createClass({

  render: function(){
    return (
      <div className="parent-component">
        <OrderComponent order={parent.order} />
      </div>
    );
  }
});

Мой компонент:

var OrderComponent = React.createClass({
  mixins: [Reflux.connect(OrderStore, "order")],

  componentDidMount: function(){
    OrderActions.update(this.props.order);
  },
  ...
  render: function(){
    <div>{this.state.order}</div>
  }
})

Мой магазин:

var OrderStore = Reflux.createStore({
  listenables: [OrderActions],

  onUpdate: function(order){
    this.update(order);
  },

  ...

  update: function(order){
    this.order = order;
    this.trigger(order);
  }
});

refluxjs
person lou    schedule 12.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы ответить на ваш вопрос, в вашем магазине вы могли просто не запускать обновление.

var OrderStore = Reflux.createStore({
  listenables: [OrderActions],

  onUpdate: function(order, ignoreTrigger){
    this.order = order;
    if (!ignoreTrigger) {
      this.update(order);
    }
  },

  ...

  update: function(order){
    this.trigger(order);
  }
});

Вы правы, что это определенно анти-паттерн. Ваш магазин должен инициализировать себя. Я бы предложил использовать функцию init в вашем магазине для инициализации вашего заказа, чтобы ваши компоненты могли просто обновляться в зависимости от состояния, поступающего из вашего магазина.

person Mitch    schedule 18.07.2016