嵌套通量数据答案

【问题标题】：Nesting Flux Data嵌套通量数据
【发布时间】：2015-03-12 21:30:16
【问题描述】：

在我的应用程序中，我对一条数据进行了两次 ajax 调用。首先，我拨打电话以获取ecommerceIntegrations 的列表。一旦我有了这些，我就可以抓住他们各自的orders。

我当前的代码如下所示：

componentDidMount: function() {
    EcommerceIntegrationStore.addChangeListener(this._onIntegrationStoreChange);
    OrderStore.addChangeListener(this._onOrderStoreChange);

    WebshipEcommerceIntegrationActionCreators.getEcommerceIntegrations();
},

_onIntegrationStoreChange: function() {
    var ecommerceIntegrations = EcommerceIntegrationStore.getEcommerceIntegrations();
    this.setState({ecommerceIntegrations: ecommerceIntegrations});
    ecommerceIntegrations.forEach(function(integration) {
        WebshipOrderActionCreators.getPendingOrdersOfIntegration(integration.id);
    });
},

_onOrderStoreChange: function() {
    this.setState({
        pendingOrders: OrderStore.getAllPendingOrders(), 
        pendingOrdersByIntegration: OrderStore.getPendingOrdersByIntegration()
    });
}

我正在尝试遵循 Facebook 的 Flux 模式，但我很确定这不会遵循它。我看到其他一些关于使用 Flux 嵌套数据的 SO 帖子，但我仍然不明白。任何指针表示赞赏。

【问题讨论】：

标签： reactjs reactjs-flux

【解决方案1】：

这里的一切看起来都不错，除了这个：

ecommerceIntegrations.forEach(function(integration) {
    WebshipOrderActionCreators.getPendingOrdersOfIntegration(integration.id);
});

不要试图触发一个动作来响应另一个动作（或者更糟糕的是，为ecommerceIntegrations 中的每个项目执行一个动作），而是备份并响应原始动作。如果您还没有完整的数据集，并且需要对服务器进行两次调用，请等待触发操作，直到您拥有对系统进行完整更新所需的所有数据。在 XHR 成功处理程序中触发第二次调用，而不是在视图组件中。这样，您的 XHR 调用就独立于调度周期，并且您已将应用程序逻辑移出视图并移到更适合封装的区域。

如果您真的想在第一次调用后更新应用程序，那么您可以在第二次调用之前在 XHR 成功处理程序中调度一个操作。

理想情况下，您可以在一次调用中处理所有这些，但我知道，如果 Web API 不受您的控制，有时这是不可能的。

在 Flux 应用程序中，不应将 Actions 视为可以作为严格的事件序列链接在一起的事物。它们应该彼此独立存在，如果您有将它们链接起来的冲动，您可能需要备份并重新设计应用对原始操作的响应方式。

【讨论】：