Redux - 複数のストア、なぜダメなのか? 質問する

Redux - 複数のストア、なぜダメなのか? 質問する

注記: 私は Redux (Baobab も) のドキュメントを読み、Google 検索とテストをかなり行いました。

Redux アプリにストアを 1 つだけ持つことが強く推奨されるのはなぜですか?

単一ストア設定と複数ストア設定の長所と短所を理解しています (この件については SO に多くの Q&A があります)。

私の意見では、このアーキテクチャ上の決定は、プロジェクトのニーズに基づいてアプリ開発者が行うものです。では、なぜ Redux ではこれが必須であるかのように強く推奨されているのでしょうか (複数のストアを作成することを妨げるものは何もありませんが)?

編集: 単一店舗への変換後のフィードバック

多くの人が複雑な SPA と考えるものに redux を使用して数か月間取り組んだ結果、単一ストア構造で作業するのは本当に楽しかったと言えます。

単一のストアと複数のストアのどちらが、非常に多くのユースケースで意味のない問題であるかを他の人が理解するのに役立つかもしれないいくつかのポイント:

  • 信頼性が高い: セレクターを使用してアプリの状態を調べ、コンテキストに関連する情報を取得します。必要なデータはすべて単一のストアにあることがわかっています。状態の問題がどこにあるのかという疑問をすべて回避できます。
  • 高速です。現在、当社のストアには 100 個近くのリデューサーがあります。その数でも、特定のディスパッチでデータを処理するのは少数のリデューサーのみで、他のリデューサーは以前の状態を返すだけです。巨大/複雑なストア (リデューサーの数が多い) は遅いという議論は、ほとんど意味がありません。少なくとも、そこからパフォーマンスの問題は発生していません。
  • デバッグしやすい: これは redux を全体的に使用するための最も説得力のある議論ですが、単一ストアと複数ストアにも当てはまります。アプリを構築すると、プロセス中に状態エラー (プログラマーのミス) が発生することは当然ですが、これは正常なことです。PITA は、それらのエラーのデバッグに何時間もかかる場合です。単一ストア (および redux-logger ) のおかげで、特定の状態の問題に数分以上費やすことはありません。

いくつかのヒント

Redux ストアを構築する際の本当の課題は、その構造を決定することです。まず、後で構造を変更すると非常に面倒だからです。次に、プロセスでアプリ データをどのように使用し、クエリするかが主に決まるからです。ストアの構造化方法については多くの提案があります。私たちの場合、次の方法が理想的であることがわかりました。

{
  apis: {     // data from various services
    api1: {},
    api2: {},
    ...
  }, 
  components: {} // UI state data for each widget, component, you name it 
  session: {} // session-specific information
}

このフィードバックが他の人の役に立つことを願っています。

編集2 - 便利なストアツール

すぐに複雑になる可能性がある単一のストアを「簡単に」管理する方法を知りたいと考えている方のために、ストアの構造的な依存関係/ロジックを分離するのに役立つツールがあります。

がある正規化これは、スキーマに基づいてデータを正規化します。次に、idDictionary と同様に、データを操作したり、データの他の部分を で取得したりするためのインターフェイスを提供します。

当時は Normalizr を知らなかったので、同じようなものを構築しました。リレーショナルJSONスキーマを受け取り、テーブルベースのインターフェース (データベースに少し似ています) を返します。リレーショナル JSON の利点は、データ構造がデータの他の部分を動的に参照することです (基本的に、通常の JS オブジェクトと同じように、データを任意の方向にトラバースできます)。Normalizr ほど成熟していませんが、数か月前から本番環境でうまく使用しています。

ベストアンサー1

複数のストアを使用する可能性があるエッジケースがあります (たとえば、画面に同時に表示される数千のアイテムのリストを 1 秒間に何度も更新するとパフォーマンスに問題が生じる場合など)。ただし、これは例外であり、ほとんどのアプリでは 1 つ以上のストアが必要になることはありません。

なぜドキュメントでこれを強調するのでしょうか? Flux の経験があるほとんどの人は、複数のストアが更新コードをモジュール化するソリューションであると想定するからです。ただし、Redux にはこれに対する別のソリューションがあります。それは、リデューサー合成です。

複数のリデューサーを持ち、さらにリデューサー ツリーに分割することで、Redux で更新をモジュール化することができます。これを認識せず、リデューサーの構成を十分に理解せずに複数のストアを使用すると、Redux の単一ストア アーキテクチャの多くの利点を逃してしまいます。

  • waitForリデューサー合成を使用すると、手動でリデューサーを作成し、追加情報と特定の順序で他のリデューサーを呼び出すことで、Flux のような「依存更新」を簡単に実装できます。

  • 単一のストアを使用すると、状態の永続化、ハイドレート、読み取りが非常に簡単になります。クライアントで入力および再ハイドレートする必要があるデータ ストレージが 1 つだけであるため、サーバーのレンダリングとデータのプリフェッチは簡単です。また、JSON はストアの ID や名前を気にせずにその内容を記述できます。

  • 単一のストアにより、Redux DevTools のタイムトラベル機能が可能になります。また、redux-undo や redux-optimist などのコミュニティ拡張機能はリデューサー レベルで動作するため、簡単に使用できます。このような「リデューサー エンハンサー」はストア用に記述できません。

  • 単一のストアは、ディスパッチが処理された後にのみサブスクリプションが呼び出されることを保証します。つまり、リスナーに通知されるまでに、状態は完全に更新されています。ストアが多数ある場合、このような保証はありません。これが、Flux に松葉杖が必要な理由の 1 つですwaitFor。単一のストアの場合、これはそもそも問題になりません。

  • 何よりも、Redux では複数のストアは不要です (いずれにせよ最初にプロファイルする必要があるパフォーマンスのエッジ ケースを除く)。ドキュメントではこれを重要なポイントとして取り上げているため、Redux を Flux のように使用してその利点を失うのではなく、リデューサー構成やその他の Redux パターンを学習することをお勧めします。

おすすめ記事