reactjs/reduxアプリで不具合状態を設定する

Question

現在のReactJSコンポーネントでは、REST APIを呼び出してJSONを取得する必要があります。それはコンポーネントwillMountで行われます。

私はReduxをご紹介しています。 JSONを取得してデフォルトの状態にするために今どこで呼び出すべきですか？ Reduxまたはアプリですか？

いずれの例も高く評価されています。

Answer 1

一般的な方法は、ストア設定（初期状態、ミドルウェア、エンハンサー）を処理してストアを返すconfigureStore()関数をエクスポートしてストアを返すconfigureStore.jsファイルを作成することです。その例については、"real-world" example in the redux repoを参照してください。

あなたのアプリが起動したときにREST APIからデータを要求し、応答を受け取ったらconfigureStore(initialState)（ここではinitialStateが取得したデータ）を呼び出して処理を進めます残りのアプリの設定と初期レンダリング。このアプローチは、APIの応答を待っている間に初期化が一時停止されるため、アプリの起動に少し時間を要します。

もう1つの選択肢は、ストアを作成して（APIプリフェッチを行わずに）通常のストアを作成し、ストアが作成された後にAPIから実際の初期状態リクエストを作成することです。そのAPIレスポンスが受信されると、INITIAL_STATEアクションをディスパッチして、それを処理できるレデューサーを用意することができます。このアプローチでは、アプリのレンダリングや少なくともAPIリクエスト中にレンダリングが開始されるため、この最初のフェッチでローディングインジケータが必要になることがあります。

サーバーレンダリングを実行している場合は、サーバー側から初期状態データを取得し、それをレンダリングしているindex.htmlのオブジェクトwindowに添付するだけです。その例については、"universal" example in the redux repoを参照してください。それで簡単にgrab your initial state from the window object when you create your storeができます。

Answer 2

あなたは通常、動作をcomponentDidMount（またはライフサイクルの制約によってWill）からディスパッチしたいと思うでしょう。そのアクションはXHRをキックオフし、通常はサンク（レクサス・サンク）または約束（レプムス・プロミス・ミドルウェア）を返します。サンクがあった場合、それは結果を伴う別のアクションをディスパッチするか、またはそれを実行する約束でディスパッチするように設定され、通常の状態でその状態を減らし、コンポーネントにバインドします。