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应用程序中，不应该将Actions视为可以作为严格事件序列链接在一起的事物。他们应该彼此独立生活，如果你有冲动链接他们，你可能需要备份并重新设计应用程序如何响应原始行动。

嵌套通量数据

1 个答案: