ストアの設定
このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →
Redux FAQ: ストアの設定
複数のストアを作成してもよいですか？また、ストアを直接インポートしてコンポーネント内で使用してもよいですか？
元々のFluxパターンでは、アプリ内に複数の「ストア」を持つことが説明されており、それぞれが異なるドメインデータを保持します。これにより、あるストアが別のストアの更新を「waitFor」する必要があるなどの問題が発生する可能性があります。Reduxでは、単一のreducerを小さなreducerに分割することでデータドメインの分離が既に実現されているため、このような処理は不要です。
他のいくつかの質問と同様に、1つのページ内に複数の独立したReduxストアを作成することは_可能_ですが、推奨されるパターンは単一のストアのみを持つことです。単一のストアを持つことで、Redux DevToolsの使用が可能になり、データの永続化や再ハイドレートが簡素化され、サブスクリプションロジックが単純化されます。
Reduxで複数のストアを使用する正当な理由としては、以下のようなケースが考えられます：
-
アプリのプロファイリングで確認された、特定の状態部分の更新頻度が高すぎることに起因するパフォーマンス問題の解決
-
大規模アプリケーションのコンポーネントとしてReduxアプリを分離する場合（この場合、ルートコンポーネントインスタンスごとにストアを作成することが考えられます）
ただし、特にFluxの背景をお持ちの方にとって、新しいストアの作成は最初に検討すべき手段ではありません。まずはreducerの合成を試み、それで問題が解決しない場合にのみ複数のストアを使用してください。
同様に、ストアインスタンスを直接インポートして参照することは_可能_ですが、Reduxでは推奨されないパターンです。ストアインスタンスを作成してモジュールからエクスポートすると、それはシングルトンになります。これにより、必要に応じて大規模アプリのコンポーネントとしてReduxアプリを分離することが難しくなったり、サーバーサイドレンダリングが困難になります。なぜならサーバーでは、リクエストごとに個別のストアインスタンスを作成する必要があるからです。
React Reduxでは、connect()関数によって生成されるラッパークラスは実際にprops.storeが存在するか確認しますが、最良の方法はルートコンポーネントを<Provider store={store}>でラップし、ストアの受け渡しをReact Reduxに任せることです。この方法では、コンポーネントがストアモジュールをインポートすることを気にする必要がなくなり、後でReduxアプリを分離したりサーバーサイドレンダリングを有効にしたりすることがはるかに簡単になります。
参考情報
ドキュメント
ディスカッション
ストアエンハンサー内に複数のミドルウェアチェーンを持ってもよいですか？ミドルウェア関数内のnextとdispatchの違いは何ですか？
Reduxミドルウェアはリンクリストのように動作します。各ミドルウェア関数は、next(action)を呼び出してアクションを次のミドルウェアに渡すか、dispatch(action)を呼び出して処理をリストの先頭から再開するか、あるいは何もせずにアクションの処理を停止することができます。
このミドルウェアチェーンは、ストア作成時に使用されるapplyMiddleware関数に渡される引数によって定義されます。複数のチェーンを定義すると正しく機能しません。なぜなら、各チェーンは異なるdispatch参照を持つため、実質的に接続が切断された状態になるからです。
参考情報
ドキュメント
ディスカッション
状態の一部だけをサブスクライブするには？サブスクリプションでディスパッチされたアクションを取得できますか？
Redux はストアの更新をリスナーに通知するための単一の store.subscribe メソッドを提供します。リスナーコールバックは現在の状態を引数として受け取りません。これは単に「何かが変更された」という通知です。サブスクライバーのロジックは getState() を呼び出して現在の状態値を取得できます。
この API は依存関係や複雑さのない低レベルのプリミティブとして設計されており、より高レベルのサブスクリプションロジックを構築するために使用できます。React Redux などの UI バインディングは、接続された各コンポーネントごとにサブスクリプションを作成します。古い状態と新しい状態をインテリジェントに比較し、特定の部分が変更された場合に追加のロジックを実行する関数を書くことも可能です。例として redux-watch、redux-subscribe、redux-subscriber があり、これらはサブスクリプションの指定方法と変更処理の異なるアプローチを提供します。
新しい状態がリスナーに渡されないのは、Redux DevTools のようなストアエンハンサーの実装を簡素化するためです。さらに、サブスクライバーはアクションではなく状態値自体に反応することを意図しています。アクションが重要で特別に処理する必要がある場合、ミドルウェアを使用できます。
参考情報
ドキュメント
ディスカッション
ライブラリ