嵌套通量数据

Question

在我的应用中，我为一份数据调用了两次 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 帖子，但我还是不明白。任何指针表示赞赏。

Answer 1

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

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

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

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

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

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

嵌套通量数据

Nesting Flux Data

reactjs

reactjs-flux