Ereignisketten mit asynchronen Datenabhängigkeiten vermeiden

Der Facebook Flux Dispatcher verbietet ActionCreators ausdrücklich, andere ActionCreators zu versenden. Diese Einschränkung ist wahrscheinlich eine gute Idee, da sie verhindert, dass Ihre Anwendung Ereignisketten erstellt.

Dies wird jedoch zu einem Problem, da Sie über Stores verfügen, die Daten von asynchronen ActionCreators enthalten, die voneinander abhängig sind. ObCategoryProductsStore kommt drauf anCategoryStore Es scheint keinen Weg zu geben, Ereignisketten zu umgehen, ohne die Folgeaktion aufzuschieben.

Szenario 1 Ein Geschäft mit einer Liste von Produkten in einer Kategorie muss wissen, aus welcher Kategorie-ID Produkte abgerufen werden sollen.

var CategoryProductActions = {
  get: function(categoryId) {
    Dispatcher.handleViewAction({
      type: ActionTypes.LOAD_CATEGORY_PRODUCTS,
      categoryId: categoryId
    })

    ProductAPIUtils
      .getByCategoryId(categoryId)
      .then(CategoryProductActions.getComplete)
  },

  getComplete: function(products) {
    Dispatcher.handleServerAction({
      type: ActionTypes.LOAD_CATEGORY_PRODUCTS_COMPLETE,
      products: products
    })
  }
}

CategoryStore.dispatchToken = Dispatcher.register(function(payload) {
  var action = payload.action

  switch (action.type) {
    case ActionTypes.LOAD_CATEGORIES_COMPLETE:
      var category = action.categories[0]

      // Attempt to asynchronously fetch products in the given category, this causes an invariant to be thrown.
      CategoryProductActions.get(category.id)

      ...

Szenario 2: Ein anderes Szenario ist, wenn eine untergeordnete Komponente als Ergebnis einer Speicheränderung und ihres @ eingebunden wircomponentWillMount/componentWillReceiveProps versucht, Daten über einen asynchronen ActionCreator abzurufen:

var Categories = React.createClass({
  componentWillMount() {
    CategoryStore.addChangeListener(this.onStoreChange)
  },

  onStoreChange: function() {
    this.setState({
      category: CategoryStore.getCurrent()
    })
  },

  render: function() {
    var category = this.state.category

    if (category) {
      var products = <CategoryProducts categoryId={category.id} />
    }

    return (
      <div>
        {products}
      </div>
    )
  }
})

var CategoryProducts = React.createClass({
  componentWillMount: function() {
    if (!CategoryProductStore.contains(this.props.categoryId)) {
      // Attempt to asynchronously fetch products in the given category, this causes an invariant to be thrown.
      CategoryProductActions.get(this.props.categoryId)
    }
  }
})

ibt es Möglichkeiten, dies zu vermeiden, ohne auf einen Aufschub zurückzugreife

Antworten auf die Frage(2)

Ihre Antwort auf die Frage