React - Ajaxのポストリクエスト後に状態を更新する方法

Question

こんにちは私は反応の初心者です、そして、私はAjaxポストリクエストの後にアップデートアプリケーションの状態に問題があります。 例えば、私の状態は以下のようになります。

state: { 
    persons: [] 
} 

その後、私は状態に新しい人を追加したいので、私はserwer要求をフェッチし、質問があります。 新しい状態を設定するためにサーバーのコレクションを更新する必要がありますか、または応答を返す必要がありますか、要求コールバックでサーバーにデータを取得するための新しい要求を強制しますか？ 他のオプションがありますか？リスナーのように、ステータスがokの応答後に状態が更新されますか？

Answer 1

私はこれが私のために二つのことに依存だと思う：あなたは、ネットワークの帯域幅とレイテンシの超効率的であると

1. 必要がありますか？
2. ajax GETリクエストを実行して状態を更新する方法はありますか？

1.の答えがYESの場合、POSTと更新状態からの応答でデータを取得する必要があります。

1.の答えがNOですが、2.の答えがYESの場合、別のAjaxリクエストをトリガーします。

両方の回答がNOの場合は、コード内のいずれかがきれいに見えます。

もう1つ考えますが、頻繁にリストをポーリングする必要がありますか？その場合は、既にポーリングに使用しているのと同じ方法を使用するべきでしょう。

Answer 2

あなたはajax呼び出しの成功関数内で直接setStateできます。

var self = this; 
    $.ajax({ 
     type: 'GET', 
     url: "http://localhost:9000/abc", 
     dataType: 'json', 
     success: function(data) { 
      self.setState({persons: data}); 
     }, 
     error: function(jqXHR,textStatus,errorThrown) { 
      console.log(textStatus); 
     } 
    });  

私はこの方法を自分のプロジェクトを通して続け、それは魅力的な働きをしています。

Answer 3

Reduxアクション作成者がサーバーからデータを取得します。フェッチライブラリ（Axios、同形フェッチなど）から約束を得ることができます。

これで、ストアミドルウェアを使用して非同期アクションを処理する必要があります。通常の文字列アクションではなく、Promiseまたはディスパッチ機能をキャッチするRedux-PromiseまたはRedux-Thunkを使用できます。ミドルウェアを使用すると、データを利用できるとき（またはエラーが発生したとき）にプレーンアクションをディスパッチできます。

ミドルウェアによってデータが利用可能であり、アクションが呼び出された場合、Reducerは新しい状態を作成し、アクションペイロードから人物の配列を取得します。

私はあなたがReduxのドキュメントのこの部分を読むことをお勧め： http://redux.js.org/docs/advanced/AsyncActions.html

非同期アクションとミドルウェアはReduxののタフな部分の一つですが、それは本当に複雑ではありませんどのようにミドルウェア作品、理解するとき、あなたReduxのドキュメントを読んでください。

は素敵な一日、 マッテオ