私は読んでいますフラックスしかしTodoアプリの例あまりにも単純すぎて、いくつかの重要な点を理解することができません。
Facebookのようなシングルページアプリを想像してみてください。ユーザープロフィールページ各ユーザー プロフィール ページでは、ユーザー情報と最新の投稿を無限スクロールで表示します。あるユーザー プロフィールから別のユーザー プロフィールに移動できます。
Flux アーキテクチャでは、これは Stores と Dispatchers にどのように対応するのでしょうか?
ユーザーごとに1 つ使用するのでしょうかPostStore、それとも何らかのグローバル ストアを使用するのでしょうか。ディスパッチャーについてはどうでしょうか。各「ユーザー ページ」ごとに新しいディスパッチャーを作成するのでしょうか、それともシングルトンを使用するのでしょうか。最後に、ルートの変更に応じて「ページ固有の」ストアのライフサイクルを管理するのは、アーキテクチャのどの部分でしょうか。
さらに、1つの擬似ページには、同じタイプのデータのリストが複数含まれる場合があります。たとえば、プロフィールページでは、フォロワーそしてフォローUserStoreこの場合、シングルトンはどのように機能しますか?およびをUserPageStore管理しますか?followedBy: UserStorefollows: UserStore
ベストアンサー1
Flux アプリには、Dispatcher が 1 つだけ必要です。すべてのデータは、この中央ハブを通過します。シングルトン Dispatcher があれば、すべての Store を管理できます。これは、Store #1 自体を更新し、次にアクションと Store #1 の状態の両方に基づいて Store #2 自体を更新する必要がある場合に重要になります。Flux では、大規模なアプリケーションではこのような状況が発生すると想定しています。理想的には、このような状況は発生しないはずであり、開発者は、可能であればこの複雑さを回避するように努めるべきです。しかし、シングルトン Dispatcher は、必要なときにいつでも対応できます。
ストアもシングルトンです。ストアは可能な限り独立して分離されている必要があります。つまり、コントローラー ビューからクエリできる自己完結型の宇宙です。ストアに入る唯一の方法は、ディスパッチャーに登録されているコールバックを経由することです。ストアから出る唯一の方法は、ゲッター関数を経由することです。ストアは状態が変化するとイベントを発行するため、コントローラー ビューはゲッターを使用して新しい状態をいつクエリするかを知ることができます。
サンプル アプリには、 が 1 つありますPostStore。この同じストアで、さまざまなユーザーからの投稿が表示される FB のニュースフィードに似た「ページ」(疑似ページ) の投稿を管理できます。その論理ドメインは投稿のリストであり、任意の投稿のリストを処理できます。疑似ページから疑似ページに移動する場合、新しい状態を反映するためにストアの状態を再初期化する必要があります。疑似ページ間を移動するための最適化として、以前の状態を localStorage にキャッシュすることもできますが、私としては、PageStore他のすべてのストアを待機し、疑似ページ上のすべてのストアの localStorage との関係を管理してから、独自の状態を更新する を設定することをお勧めします。PageStore投稿については何も保存されないことに注意してください。これは のドメインPostStoreです。疑似ページは のドメインであるため、 は特定の疑似ページがキャッシュされているかどうかを知るだけです。
にはメソッドPostStoreがありますinitialize()。このメソッドは、これが最初の初期化であっても常に古い状態をクリアし、Dispatcher を介して Action から受信したデータに基づいて状態を作成します。ある疑似ページから別の疑似ページに移動すると、PAGE_UPDATEの呼び出しをトリガーするアクションが必要になる可能性がありますinitialize()。ローカル キャッシュからのデータの取得、サーバーからのデータの取得、楽観的レンダリング、XHR エラー状態など、詳細を検討する必要がありますが、これが一般的な考え方です。
特定の疑似ページがアプリケーション内のすべてのストアを必要としない場合、メモリの制約以外に、未使用のストアを破棄する理由があるかどうかはよくわかりません。ただし、ストアは通常、大量のメモリを消費しません。破棄するコントローラー ビューのイベント リスナーを削除するだけです。これは、React のcomponentWillUnmount()メソッドで実行されます。