[解決済み】Redux - 複数店舗、なぜダメなの？

質問

Reduxのドキュメントを読みましたし（Baobabも）、Google & テストもしました。

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

シングルストアセットアップとマルチストアセットアップの長所・短所は理解しています( このテーマについては、SOに多くのQ&Aがあります。 ).

IMOでは、このアーキテクチャの決定は、彼らのプロジェクトのニーズに基づいて、アプリ開発者に属するものです。それなのに、なぜReduxでは強く推奨され、ほとんど必須と思われるほどなのでしょうか( マルチストアを作ることを止めることはできないが )?

EDIT: シングルストア化後のフィードバック

多くの人が複雑なSPAと考えるものにreduxを使って数ヶ月間作業した後、シングルストア構造は作業する上で純粋な喜びであると言えます。

なぜシングルストアかマルチストアかというのは、多くのユースケースにおいて無意味な問題なのか、他の人が理解するのに役立つかもしれない点をいくつか挙げておきます。

• 信頼性が高い セレクタを使用して、アプリの状態を調べ、コンテキストに関連する情報を取得します。私たちは、必要なすべてのデータ は1つのストアにあります。どこに状態があるのか、という疑問は一切不要です。 の問題がある可能性があります。
• 速い 私たちのストアには、現在100近いリデューサがあります。その数でも、データを処理するリデューサはほんの一握りです。 それ以外は、以前の状態を返すだけです。そのため という議論は、巨大/複雑なストア ( レデューサーの数 が遅いというのは は、かなりムダです。少なくとも私たちはパフォーマンスの問題を見たことがありません ということです。
• デバッギングフレンドリー これはreduxを使用する上で最も説得力のある議論ですが、シングルストアとマルチストアの比較でも同じことが言えます。 ストアです。アプリを構築する際、必ずと言っていいほどステートエラーが発生します。 プロセス( プログラマーのミス それは当たり前のことです。大変なのは、そのような は、デバッグに何時間もかかります。シングルストアのおかげで( と リダックスロガー に数分以上費やしたことはありません。 の問題です。

いくつかのポイント

reduxストアの構築で本当に難しいのは、以下の方法を決定するときです。 構造 ということです。第一に、将来的に構造を変更するのは大きな苦痛でしかないからです。第二に、どのようなプロセスでアプリのデータを使用し、クエリするかは、この構造によってほぼ決定されるからです。ストアをどのように構成するかについては、多くの提案があります。私たちの場合は、次のようにするのが理想的だと思いました。

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

このフィードバックが他の人の役に立つといいのですが。

EDIT 2 - 役に立つストアツール

を簡単に管理する方法をお探しの方へ。 シングルストア は、すぐに複雑になる可能性があります。ストアの構造的な依存関係やロジックを分離するのに役立つツールがあります。

以下のものがあります。 ノーマライザー は、スキーマに基づきデータを正規化します。そして、データを扱うためのインターフェイスを提供し、データの他の部分を id 辞書のようなものである。

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

解決するには？

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

なぜ、このことをドキュメントで強調するのでしょうか？なぜなら、Fluxのバックグラウンドを持つほとんどの人は 複数のストアを持つことが、アップデートコードをモジュール化するための解決策だと考えています。しかし、ReduxにはRedducerコンポジションという別のソリューションがあります。

Reduxでは、複数のリデューサを持ち、さらにリデューサツリーに分割することで、更新をモジュール化することができます。このことを認識せず、まずreducer compositionを十分に理解せずにマルチストアに走ると、Reduxのシングルストアアーキテクチャの多くの利点を失うことになります。

• レデューサー・コンポジションを使用すると、以下のような依存性のある更新を簡単に実装することができます。 waitFor を書くことで、Fluxで他のreducerを追加情報と特定の順番で手動で呼び出すことができます。

• ストアが1つあれば、ステートの永続化、ハイドレーション、読み込みが非常に簡単になります。サーバーレンダリングとデータのプリフェッチは、クライアント上で充填と再水和が必要なデータストレージが1つだけであり、JSONはストアのIDや名前を気にせずにその内容を記述できるため、些細なことです。

• ストアを1つにすることで、Redux DevToolsのタイムトラベル機能が可能になります。また、redux-undo や redux-optimist のようなコミュニティによる拡張は、reducer レベルで操作するため、簡単にできます。このようなレデューサーのエンハンサーは、ストアのために書くことはできません。

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

• 何より、Reduxでは複数のストアは不要です（いずれにせよ最初にプロファイルすることになっているパフォーマンスのエッジケースを除く）。ReduxをFluxのように使ってその利点を失うのではなく、reducerのコンポジションや他のReduxパターンを学ぶよう、ドキュメントで重要なポイントとして取り上げています。