Reduxネストされたレデューサーまたは状態を正規化しますか？

Question

Reactでフォームコンポーネントを作成していて、フォームとフィールドの状態をReduxで保存したいとします。

私はフォームレデューサーとフォームフィールドレデューサーを持っています。

私はまず腸の感情に倣ってフォームレデューサーのフォームレデューサーを入れ子にしました。これは、基本的にformField関連のスイッチケースを、フォームレデューサーとフォームフィールドレデューサーの両方に持つことを意味していました。

これはちょっと面倒です（コードを繰り返す）ので、私はドキュメントをよく読んで、状態を正規化することをお勧めします。そこで、入れ子にされたフォームフィールドを取り除き、フォームと同じレベルに配置しました。

これは還元剤をきれいにしましたが、特定のフォームのformFieldsを取得することは恐ろしいことです。私は基本的にすべてのformFieldsをループし、正しい "formId"パラメータで返すだけです。

Reduxのドキュメントでは、状態を正規化されたデータベースとして扱うべきだと述べていますが、結果を照会することができないという贅沢を忘れていませんでしたか？

私はここで何かを見逃しましたか？これを解決するための推奨される方法は何ですか？

Answer 1

あなたは配列としてformFields状態を保つが、formIdがキーであることと、それをオブジェクトとして照会するようですね：

これは減速がきれい作られたが、現在は特定のためのフォームフィールドを取得フォームはひどいと感じます。私は基本的にすべてのformFieldsをループし、正しい "formId"パラメータで返すだけです。

あなたが対象となるformFields状態を変更する場合は、クエリにはるかに簡単になります：formFields[fieldId]。

他の回答に記載されているとおり、compute derived stateを定義する合成可能な「セレクタ」を記述することができます。次に、コンポーネントのコードはシンプルなものになります。なぜなら、小型で構成可能なセレクタでデータを処理するために必要なすべての処理が必要になるからです。

shopping-cartの例では、レデューサーとセレクターをチェックアウトして、慣用的なReduxアプリケーションで状態がどのように構成されているかを知ることができます。この例ではセレクタにバニラ関数を使用していますが、パフォーマンスを向上させるために再選択を使用することをお勧めします。

Answer 2

あなたの問題は、派生データのクエリに関するものです。 （、すなわち、フォームXに属するフィールド）。

reselectと呼ばれるユーティリティツールもありますが、ユースケースはその解決方法に合うようです。

formIdが必要なセレクタを記述するだけで、フォームフィールドの配列が返されます。