2

私のアプリでは、1 つのデータに対して 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、バックアップして元のアクションに応答します。完全なデータ セットがまだなく、サーバーに対して 2 つの呼び出しを行う必要がある場合は、システムを完全に更新するために必要なすべてのデータが揃うまで、アクションを起動するのを待ちます。ビュー コンポーネントではなく、XHR 成功ハンドラーで 2 番目の呼び出しを開始します。このようにして、XHR 呼び出しはディスパッチ サイクルに依存せず、アプリケーション ロジックをビューの外に移動し、より適切にカプセル化された領域に移動しました。

最初の呼び出しの後に本当にアプリを更新したい場合は、2 番目の呼び出しを行う前に、XHR 成功ハンドラーでアクションをディスパッチできます。

理想的には、これらすべてを 1 回の呼び出しで処理しますが、Web API が制御されていない場合、それが不可能な場合があることを理解しています。

Flux アプリでは、アクションをイベントの厳密なシーケンスとして連鎖できるものと考えるべきではありません。それらは互いに独立して存在する必要があり、それらを連鎖させたいという衝動がある場合は、おそらく元のアクションに対するアプリの応答方法をバックアップして再設計する必要があります。

于 2015-01-14T17:41:00.123 に答える