Redux - 複数の店舗、どうしてですか？
注：私はReduxのドキュメント（Baobabも）を読んでいます。また、GoogleでGoogleテストとテストについてかなりの部分を共有しています。
Reduxアプリにストアが1つしかないことを強くお勧めするのはなぜですか？
私は、シングルストア設定とマルチストア設定の長所/短所を理解しています（ SOについての多くのQ&Aがあります）。
IMOは、このアーキテクチャ上の決定は、プロジェクトのニーズに基づいてアプリ開発者に属しています。それでは、どうしてそんなに強くReduxのためにそれが強く聞かれるようになるのを強制するという意味でそれが強く示唆されます（何も私たちが複数の店を作ることを妨げない）？
編集：シングルストアに変換した後のフィードバック
数ヶ月後にreduceを使って複雑なSPAを検討した結果、1つの店舗構造で作業できたことは非常にうれしいことです。
多くのユースケースで、単一の店舗と複数の店舗の対比がどうして問題になるのかを他の人が理解するのに役立つかもしれない、いくつかのポイント：
- それは信頼できます：アプリの状態を掘り下げてコンテキスト関連の情報を取得するためにセレクタを使います。必要なデータはすべて単一のストアにあることがわかりました。それは州の問題がどこにあり得るかについてのすべての疑問を避けます。
- それは速いです：私たちの店は現在それ以上ではないにしても100近くの減力剤を持っています。たとえその数でさえ、ほんの一握りのレデューサーだけが与えられたディスパッチでデータを処理します、他はただ前の状態を返すだけです。巨大で複雑なストア（ nbr of reducers ）は遅いという議論は、ほとんど議論の余地がありません。少なくともそこからパフォーマンスの問題が発生することはありません。
- デバッグしやすい：これは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 - 便利な保存ツール
シングルストアを「簡単に」管理する方法を疑問に思っている人のために、それはすぐに複雑になる可能性があります。あなたの店の構造的な依存関係や論理を分離するのを手助けするツールがあります。
スキーマに基づいてデータを正規化する Normalizr があります。それはそれからあなたのデータを処理しそしてidによってあなたのデータの他の部分をフェッチするためのインターフェースを提供します。
当時はNormalizrを知らなかったので、同じ方向に沿って何かを作りました。 relational-json はスキーマを取り、テーブルベースのインタフェース（はデータベースに少し似ています）を返します。 relational-jsonの利点は、データ構造がデータの他の部分を動的に参照することです（基本的に、通常のJSオブジェクトのように、任意の方向にデータを移動できます）。 Normalizrほど成熟していませんが、私は数ヶ月前から本番環境でうまく使用しています。
複数のストアを使用する可能性のあるEdgeのケースがあります（たとえば、1秒間に何度も画面上にある数千のアイテムのリストを更新する際にパフォーマンスの問題がある場合）。ただし、これは例外であり、ほとんどのアプリでは1つ以上のストアは必要ありません。
なぜドキュメントでこれを強調するのですか？ Fluxのバックグラウンドから来たほとんどの人は更新コードをモジュール化するためのソリューションが複数のストアであると仮定しますが、Reduxにはこれに対する別のソリューションがあります：レデューサー構成。
複数のレデューサーをさらにレデューサーツリーに分割することで、Reduxでモジュラーアップデートを維持できます。これを認識せず、最初にリデューサーの構成を完全に理解せずに複数のストアに移動すると、Reduxの単一ストアアーキテクチャの多くの利点が失われます。
レデューサーコンポジションを使用すると、追加情報と特定の順序で他のレデューサーを手動で呼び出すレデューサーを作成することで、Fluxで
waitForの「依存更新」を簡単に実装できます。単一のストアを使用すると、状態の維持、水和、および読み取りが非常に簡単になります。サーバーのレンダリングとデータのプリフェッチは簡単です。なぜなら、クライアントにデータを格納して復元する必要があるデータストレージは1つだけであり、JSONはストアのIDや名前を気にせずにコンテンツを記述できるからです。
単一のストアにより、Redux DevToolsのタイムトラベル機能が可能になります。また、reducerレベルで動作するため、redux-undoやredux-optimistなどのコミュニティ拡張機能も簡単になります。このような「リデューサーエンハンサー」は、店舗向けには作成できません。
単一のストアは、ディスパッチが処理された後にのみサブスクリプションが呼び出されることを保証します。つまり、リスナーに通知されるまでに、状態は完全に更新されます。多くの店舗では、そのような保証はありません。これが、Fluxが
waitForcrutchを必要とする理由の1つです。単一の店舗では、これは最初に目にする問題ではありません。とりわけ、Reduxでは複数のストアは不要です（とにかく最初にプロファイルすることになっているパフォーマンスEdgeの場合を除く）。ドキュメントで重要なポイントにしているので、ReduxをFluxのように使用してその利点を失う代わりに、リデューサーの構成や他のReduxパターンを学ぶことをお勧めします。
数百または数千のリデューサーを持つ非常に大規模なエンタープライズアプリでは、アプリのさまざまな領域をまったく別のアプリとして考えると便利なことがよくあります。そのような場合（ドメイン名を共有するのは実際には複数のアプリです）、私は複数のストアを使用します。
たとえば、私は次のような共通の機能領域を別々のアプリとして扱う傾向があります。
- 管理者
- 分析/データ表示ダッシュボード
- 課金管理と購入フロー
- エンタープライズアカウントチーム/権限管理
これらのもののいずれかが小さい場合は、単にメインアプリの一部としてそれらを保管してください。それらが非常に大きくなる場合（一部のエンタープライズアカウント管理および分析ツールがそうであるように）、それらを分割します。
非常に大きなアプリケーションを管理するための最良の方法は、それらを多数の小さなアプリケーションの組み合わせのように扱うことです。
あなたのアプリが〜50k LOCを言うよりも少ないなら、あなたはおそらくこのアドバイスを無視して代わりにDanのアドバイスに従うべきです。
あなたのアプリが100万LOCを超える場合は、たとえあなたがモノレポでそれらを維持していたとしても、あなたはおそらくミニアプリを分割するべきです。
次のユースケースでは、複数のストアが役立ちます。1.データ構造、動作、アプリケーションコンテキストに関して互いに独立した大規模なコンポーネントがある場合。これらのコンポーネントを分離すると、データとアプリケーションフローの管理が簡単になります。それはまたあなたの部品の独立した開発そして維持を助けます。 2.パフォーマンスの問題：一般的なユースケースではありませんが、一部のコンポーネントが頻繁に更新され、他のコンポーネントに影響を与えない場合は、おそらく別のストアに移動することができます。
他のすべてのケースでは、複数の店舗を用意する必要はありません。ダンが言うように、思慮深い還元剤組成物を作ることはより良い解決策であることを証明することができます。
このアーキテクチャ上の決定は、プロジェクトのニーズに基づいてアプリ開発者が行います。
あなたはあなた自身の世界に住んでいます。日常的に人気があるので、私はreduxを使う人々と出会っています。何の決断もなしにどれだけのプロジェクトが削減され始めたか想像もできませんでした。私はreduxアプローチを嫌いますが、他の開発者は他に何も知らないのでそれを使わなければなりませんでした。それはFacebookで膨らんだ単なる壮大なバブルです。
- それは信頼できませんストアの一部が孤立していないので。
- これは非効率的ですあなたがハッシュトライをクローンしたりトラバースしたりしているからです。突然変異が算術的に大きくなると、複雑さは幾何学的に大きくなります。レデューサー、セレクターなどをリファクタリングしても修正できませんでした。トライを分割する必要があります。
- 遅くなったとき誰もそれを別々のストアを持つ別々のアプリケーションに分割したくないでしょう。誰もリファクタリングにお金をかけたくないのです。人々は通常いくつかのスマートコンポーネントをダンプに変換するそしてそれはそれです。未来がレデックス開発者を待っているのをあなたは知っていますか？彼らはこれらの地獄を維持するでしょう。
- デバッグには向いていません。店舗の実質的に孤立した部分間の接続をデバッグするのは困難です。これらのつながりの量を分析することすら難しいです。
あなたがいくつかのreduxストアを持っていると想像しましょう。単方向のデータフローが中断されます。店舗間の接続量がすぐにわかります。あなたはこれらのつながりに苦しむことができます。
一方向の流れを持つ単一の不変の店はすべての病気のためのエリキシル剤ではありません。プロジェクトのアーキテクチャを維持したくない場合は、とにかく苦しむでしょう。
なぜreducexを使って複数の店舗を利用できないのですか????
これはReduxでは必要ありません。データドメイン間の分離は、単一のレデューサーをより小さなレデューサーに分割することによってすでに達成されているからです。
複数の店舗を作ることができますか？自分のストアを直接インポートして、自分でコンポーネント内で使用することはできますか？
元のFluxパターンは、アプリ内に複数の「ストア」を持ち、それぞれがドメインデータの異なる領域を保持することを記述しています。これにより、あるストアが「waitFor」別のストアを更新する必要があるなどの問題が発生する可能性があります。
これはReduxでは必要ありません。データドメイン間の分離は、単一のレデューサーをより小さなレデューサーに分割することによってすでに達成されているからです。
他のいくつかの質問と同様に、ページ内に複数の異なるReduxストアを作成することは可能ですが、意図されたパターンは単一のストアのみを持つことです。単一のストアを持つことで、Redux DevToolsの使用が可能になり、データの永続化と再ハイドレーションが簡単になり、サブスクリプションロジックが簡素化されます。
Reduxで複数のストアを使用するいくつかの正当な理由には、次のようなものがあります。
アプリのプロファイリングで確認したときに、状態の一部が頻繁に更新されることによるパフォーマンスの問題の解決。より大きなアプリケーションでReduxアプリをコンポーネントとして分離する場合は、ルートコンポーネントインスタンスごとにストアを作成することをお勧めします。しかしながら、特にあなたがフラックスのバックグラウンドから来たものであるならば、新しい店を作ることはあなたの最初の本能であるべきではありません。最初に減力剤の構成を試してみて、それがあなたの問題を解決しない場合にのみ複数の店を使ってください。
同様に、ストアインスタンスを直接インポートして参照することもできますが、これはReduxでは推奨されるパターンではありません。ストアインスタンスを作成してモジュールからエクスポートすると、それはシングルトンになります。つまり、サーバー上ではリクエストごとに別々のストアインスタンスを作成する必要があるため、これが必要な場合はReduxアプリをより大きなアプリのコンポーネントとして分離すること、またはサーバーレンダリングを有効にすることが難しくなります。
私はReduxとFluxを使い、Reduxの方がより良い仕事をしていると信じています。
ストアはJavaScriptオブジェクト内にあることを忘れないでください。ストアは1つしかありませんが、簡単に拡張して再利用できます。1つのストアを使用すると、Redux devツールを使用して簡単に移動できます。大きなアプリケーション.
また、ある店舗のコンセプトは、私たちのためにデータベースを模倣することです。それは、あなたがそれを変更することができて、あなたがブラウザのメモリでそれにアクセスすることができる真実の一つの情報源です。
アプリケーション全体をうまく管理できれば、1つのストアでアプリケーション全体のステータスを管理できます。