モデルの単一インスタンスと複数インスタンスを編集するためにReactアプリケーションを慣用的に構造化する方法

Question

いくつかのリアクションコードをRailsのコンテキストでどのように構造化するかを考えようとしています。

ここに私の状況に類似したものがあります。私のWebアプリケーションにはグラフモデルがあります。さまざまなメトリックのグラフをカスタマイズすることができます。グラフを編集できるGraphEditorというReactコンポーネントとグラフを表示するGraphViewerというコンポーネントを作った。 GraphEditorはグラフのトップレベルの状態を維持し、グラフをシリアル化してバックエンドに送信するロジックを持っています。 GraphEditorは、グラフのトップレベルの状態を保存するだけでなく、軽く高価な束の結果も保存します。

時々、グラフのグループを扱うことができるようにしたいと思います。たとえば、ある特定のユーザーがすべてのグラフを持っています。これらのグラフを作成、破棄、表示、および編集できる必要があります。私はこれをどのようにするべきですか？

私の最初の考えは、グラフのリストを取得し、ユーザーが現在どのグラフを見ているかを示す状態を維持するMultiGraphAppコンポーネントを構築することでした。次に、そのグラフのGraphEditorまたはGraphViewerをレンダリングします。これは私のアプリケーションのこれらの子コンポーネントが多くの内部状態を持っているので、私は不快になります。

また、私のMultiGraphAppにすべてのグラフの状態を保存させて、GraphEditorコンポーネントを書き直してグラフを保存するときにコールバックを渡すこともできます。これは理にかなっていますが、今は、MultiGraphAppでラップされていないGraphEditorを作成できないことを意味します。GraphEditorを単独で使用したいので迷惑です。

もう1つの解決策は、これを単一ページのアプリケーションにすることを諦めて、あきらめて、グラフを作成したり切り替えたりするだけです。このモデルでは、グラフを切り替えるのはリンクをたどるようなものです。

どれが最も反応慣性ですか？

Answer 1

ほとんどのデザインは正しいです。あなたが紛失しているパズルの部分はFluxです。

Fluxは、「グローバル状態」の一部と見なすべき項目を抽象化するデザインパターンです。ユースケースは完璧な例です。あなたはグラフのすべてのを保存し、適用可能な場合はそのアプリケーション全体にその情報を広める場所が必要です。

Fluxは、「真実の源」を提供することでこれを行うのに役立ちます。それはあなたのデータ川の源泉です。

システムのFluxの実装には、すべてgraphsの配列を保持するGraphStoreが含まれている可能性があります。また、セレクタ機能とともに、selectedGraphIndexの値を格納することもできます。

Fluxデザインパターンの非常に一般的な実装であるREDUXを見てみることもできます。