redux でのストアの正規化に関する情報がたくさんあります。しかし、グラフからデータを表示したい場合はどうすればよいでしょうか?
私のデータは次のようになります
{ courses: [{ chapters: [{ assignments: [{ ...blah }] }] }] }
各エンティティにはデータがあります。
そのデータをページに表示したいのですが、すべてのデータが正規化されています。さらに、3 つのエンティティすべてのコンテナー コンポーネントが必要です。
これは、正規化の有無にかかわらず、redux で行うのは非常に難しいようです。推奨される対処方法があるはずです。
必要なデータの Id を受け入れるコンテナを作成できます。コンテナのコンポーネントをストアに接続します。次に、コンポーネントは、子をストアなどに接続するためのコンテナを作成します..
ID でストアからデータを取得するには、以下を確認できます: Javascript Redux - ID でストアから要素を取得する方法
ボイラープレートを減らすために、3 つのビューの例で行ったのと同じモジュールでコンポーネントを接続できます。
https://github.com/reactjs/redux/tree/master/examples/tree-view
明らかに、コンポーネントはそれほど馬鹿げたものではなくなります (葉のコンポーネントを除く)。
次の例も確認してください: コンポーネントはどのネスト レベルで Stores in Flux からエンティティを読み取る必要がありますか?
これを回避する方法は、必要なオブジェクトを Redux 状態から非正規化関数を介して実行することでした。mapStateToPropsに渡した関数内でこれを行いましたconnect。
コンテナ レベルでこれを行う場合、完全に非正規化されたオブジェクトのどの部分を選択して選択し、それらを介して他のコンポーネントに送信できますprops(したがって、 を使用しconnectないと、再度非正規化しても実際のメリットはありません)。
denormalizer 関数には、denormalizr ライブラリを使用できます。しかし、ソース コードを見ると、実際の関数はそれほど大きくないため、必要に応じて変更して、たとえば Redux の状態に直接フックすることができます。