2016-06-20 17 views
1

私は、互いに依存する複数のエンドポイントからデータを取得する必要がある場合、どのように私のreduxアプリケーションを構造化すべきかを理解しようとしています。Reduxデータ依存関係管理

たとえば、イベントの詳細をリストするコンポーネントがあるとします。私はイベントIDを持っているので、そのイベントのすべての情報を取得する必要があります。また、イベント時間の間に発生するすべてのイベントも取得する必要があります。検索するイベントを知るためには、選択したイベントの開始時刻と終了時刻を取得する必要があります。

これを処理するためにコンポーネントを構成するにはどうすればよいですか?これまでのところ私は次のようなものを考えていました:

上記の問題は、キャッシュが無限ループを作成しないことに依存していることです。

+0

これはreduxに関する質問ですか、またはコンポーネントをビルドする方法ですか?また、依存関係管理はどこで始まっていますか? – lux

答えて

4

正しく理解していれば、複数の非同期HTTP呼び出しを調整し、アプリケーションの状態を正しい状態に更新しようとしていますか?


このタスクへの慣用的なアプローチは、使用async actionsになります。これにより、非同期アクションの単一のディスパッチを介して、Reactコンポーネントからロードプロシージャをトリガすることができます。この非同期アクションは、バックエンドへの呼び出しと呼び出し間のデータのマッピングを調整します。

は、必要に応じてアプリケーションの状態を更新する途中で同期アクションを送信できます。ユーザーに進行状況を表示したり、最終結果を表示することができます。

この結果、というAPIのオーケストレーションが完全にカプセル化されたになります。アプリケーションをレンダリングするReactコンポーネントも、レデューサーも呼び出しの順序やそれらの間で渡す情報について知る必要はありません。あなたの国家の一部であるべきあなたの呼び出しの中間結果と最終結果のみがそれらに関連します。あなたはまた、問題にわずかに異なるアプローチを取るsagas、に見ることができるアクションを非同期に代わるものとして、


+1

これは多かれ少なかれ問題の中心にあります。私は非同期アクションの狭いビューを持っていたと思います。私は非同期アクションが複数の同期ajax要求を実行し、途中で同期アクションをディスパッチできることを考慮しませんでした。 TLDR:非同期アクションは非常に柔軟です。 –

+0

もしできれば、私はあなたにもう一つのサガを+1します。私はそれらを調べて、複数階層の依存関係のユースケースによく合います。 –