1

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

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

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

画面 1:

コンポーネント: Header、BodyTypeA; 呼び出す API:apiA

画面 2:

コンポーネント: Header、BodyTypeB; 呼び出す API:apiB

私の理解では、API 呼び出しは、新しい ID を状態に格納するときにレデューサーで行う必要があります。しかし、画面間で共有されるコンポーネントによってアクションがディスパッチされた場合、どの画面が表示され、どの API を呼び出すかをどのように判断するのでしょうか? どうにかBodyして ID の変更をサブスクライブし、画面内から API 呼び出しをトリガーすることはできますか? 画面タイプは、react-router によって決定されます。レデューサーはルーターにアクセスして、どの画面が表示されているかを判断できますか? このようなシナリオを処理するためのベスト プラクティスはありますか?

4

1 に答える 1

2

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

私の理解では、新しい ID を状態に格納するときに API 呼び出しをレデューサーで行う必要があります。

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

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

「現在地」を特定するには、状態ツリーにルーティング情報を保持するのが最善です。とにかく反応ルーターを使用しているので、https://github.com/reactjs/react-router-reduxを使用して状態ツリーにルート情報を公開し、ミドルウェア/アクションクリエーター/セレクターからアクセスすることを検討してください。

ID の変更を Body でサブスクライブし、画面内から API 呼び出しをトリガーすることはできますか?

はい、技術的にはストアの変更をサブスクライブできますが、通常はサブスクライブしないでください。私の他のポイントを参照してください。うまくいけば、それは十分に明確です。

画面タイプは、react-router によって決定されます。レデューサーはルーターにアクセスして、どの画面が表示されているかを判断できますか?

（一般に）レデューサーは状態のスライスにしかアクセスできないため、レデューサーは反応するルーターアクションに反応する場合がありますが（react-router-reduxを使用する場合-上記を参照）、必要なルートの詳細を保存しますが、原則として状態ツリーから特定のコンポーネントに必要なデータを構築/プルするのは、セレクターおよび/または接続されたコンポーネント次第である必要があります。

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

react-router-redux を使用して、アクションに応答して API 呼び出しをトリガーし、API から返されたデータを含む連続したアクションをディスパッチするミドルウェアを導入すると思います。レデューサーで処理し、データをツリーに保存するアクション。

bodyTypeA や bodyTypeB のようなコンポーネントがある場合、それらのコンポーネントは、A または B の情報を保持し、それをアクション作成者に伝達できます (すべきです)。たとえば、requestForId(ID) というアクション作成者がいる場合、署名を requestForId(ID, type) に変更し、コンポーネント/コールバックで (そのアクション作成者を呼び出すときはいつでも)、ID だけでなく渡すことになります。タイプ、つまり bodyTypeA は requestForId(ID, 'A') でそれを呼び出します。

于 2016-11-01T08:52:33.303 に答える