Redux：潜在的に何千ものレコードのレコードごとに1つのフォーム

Question

シナリオ：私は資産のリスト<AssetList />を持っています。ユーザーがリストの一番下までスクロールすると、私のアプリは残りのアセットを遅延ロードします。したがって、ユーザーがどれくらい遠くまでスクロールするかによって、数千もの資産でも何百もの資産をロードできます。

問題：各資産<Asset />をクリックは、それを拡張し、ユーザーがそのフィールドを編集できるようになります（名前、コンテンツを、...）の移行はシームレスでなければなりません。私が見ているように、各資産はフォームである必要があります。私の懸念は1）アプローチと2）パフォーマンスです。

アプローチ：ここで取り組んでいるアプローチは、レコードごとに1つのフォームをredux-formを使用して使用しています。フラックス・アーキテクチャーを強化する代替手段はありますか？これは共通の問題ですか？ここ

別の潜在的なアプローチは、次のような状態ツリーを変更し、全体の資産リストごとに一つの形を持つことです。

{ 
    assets: {..}, 
    assetForm: {..} 
} 

そして<Asset />をクリックする代わりに、その減速にカスケードされます適切なアクションをトリガーしますassetFormの状態が更新されます。

パフォーマンス：私の最大の懸念事項。私はページ上の多数のフォームに気にしませんが、私の心配は、各フォームがredux store reducer（少なくともredux-form doのようなutilと思われるもの）と関連しているということです。つまり、潜在的に何千もの減速機が性能に影響を与えますか？

私の前提が正しくない場合は、よろしくお願いいたします。私は反応するために比較的新しいです&還元。

Answer 1

私はあなたがかなり一般的な使用事例で正当な懸念を表明していると思います。いくつかの質問に答えるために、私はあなたのアプローチが有効であると思います。私は個人的にredux-formを使用していないので、より多くの経験を持つ人に回答やコメントを追加さ​​せていただきますが、より抽象的な観点からは、ユーザーがAssetをクリックしたときにのみフォームを作成してください。 Assetがクリックされたときにフォームがレンダリングされます。この方法では、ユーザーが必要とするフォームの数は、Assetに比べて劇的に少なくなります。

Assetのフォームを初期化しなければならない場合は、具体的なredux-formの経験がなくてもフォームを初期化する必要がある場合は、フォームが初期化されたときに？つまり、各キーがAssetの一意のIDであり、その値がフォームデータを持つ別のオブジェクトであるオブジェクトであるassetFormsと呼ばれる状態変数を考えてください。この方法でも、Assetsと同じ数の状態オブジェクトだけを保持することができます。

混乱の一部を解消することを希望しますが、詳細が必要な場合は自由に質問に展開してください。