APIを呼び出してreact/redux内の他の子から1人の子供を更新する方法

Question

私はredux、react、react-routerおよびreselectを使用しています。 HeaderとBodyという2つのコンポーネントを含む画面があります。 HeaderにIDを選択するコンポーネントがあります。新しいIDが選択されると、新しいアクションがディスパッチされて、状態のIDをreduxで更新します。

このIDに基づいて、サーバーから要素をロードして状態に格納する非同期API呼び出しが必要です。この状態では、画面のレンダリングがトリガーされ、Bodyに要素を表示する必要があります。読み込まれた要素は、再選択の状態から抽出されます。

BodyコンポーネントにはさまざまなAPI呼び出しがあり、コンポーネントは1つだけHeaderになるため、実際のシナリオはそれより少し複雑です。しかし、彼らは別の画面として扱うことができます。したがって、たとえば：

画面1：

コンポーネント：Header、BodyTypeA。 apiA

画面2：

コンポーネント：呼び出すためのAPI Header、BodyTypeBを。呼び出すAPI：apiB

私の理解では、API呼び出しは、状態に新しいIDを格納するときに減速機で実行する必要があります。しかし、どの画面が表示されているかを判断する方法と、画面上で共有されるコンポーネントによってアクションがディスパッチされた場合に呼び出すAPIはどれですか？ Bodyで何とかIDの変更を購読し、画面内からAPI呼び出しを開始できますか？画面のタイプは、反応ルータによって決定されます。どの画面が表示されているかを判断するために、減速機はルータにアクセスできますか？このようなシナリオを処理するためのベストプラクティスはありますか？

Answer 1

あなたはこれを思っているようです。したがって、一度に1つのことを：

私の理解は、API呼び出しは、状態に新しいIDを格納するときに減速機で実行する必要があります。

レデューサーからのアクションを返すことができるredux-loopを使用しない限り、あなたは間違っています。プリンシパルレデューサーでは、どのアクションもディスパッチできません。それらは消費するだけです。アクションをディスパッチしてAPIを呼び出すミドルウェアレイヤ（またはアクションクリエイター）です。

しかし、画面間で共有されるコンポーネントによってアクションがディスパッチされる場合、どの画面が表示され、どのAPIが呼び出されるかを判断するにはどうすればよいですか？

「現在地」を判断するには、ルーティング情報を状態ツリーに保存することをお勧めします。とにかく反応ルータを使用しているので、https://github.com/reactjs/react-router-reduxを使用して状態ツリーの経路情報を公開し、ミドルウェア/アクション作成者/セレクタからアクセスしてください。

BodyでIDの変更を登録して、画面内からAPI呼び出しをトリガーすることはできますか？

はい、技術的には変更を保存することができますが、通常はそれもありません。他の点を参照してください。うまくいけば十分です。

反応の種類によって画面の種類が決まります。どの画面が表示されているかを判断するために、減速機はルータにアクセスできますか？

還元剤は状態のスライスにしかアクセスできませんので、あなたのレデューサーは反応するかもしれません（あなたがreact-router-reduxを使用する場合 - 上記を参照）。基本的には、選択されたコンポーネントに必要なデータを状態ツリーから構築/プルするためには、セレクタや接続コンポーネントに依存する必要があります。

このようなシナリオを処理するためのベストプラクティスはありますか？

私はあなたのアクションに応じてAPIコールをトリガーするミドルウェアを導入し、APIから返されたデータを含む連続アクションをディスパッチします。あなたのレデューサーで処理するそのアクションは、データをツリーに格納します。

bodyTypeA、bodyTypeBのようなコンポーネントがある場合はランダムなヒントです.AまたはBの場合、これらのコンポーネントは情報を保持して（必要であれば）情報を保持してアクション作成者に伝播できます。例えば。 requestForId（ID）というアクション作成者がいる場合は、requestForId（ID、type）とコンポーネント/コールバック（そのアクション作成者を呼び出すときはいつでも）のIDを渡すだけでなく、型、つまりbodyTypeAはrequestForId（ID、 'A'）でそれを呼び出します。