2

在我的应用程序中，我对一条数据进行了两次 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 帖子，但我仍然不明白。任何指针表示赞赏。

4

1 回答 1

3

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

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

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

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

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

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

于 2015-01-14T17:41:00.123 回答