問題タブ [normalizr]

React + Redux + Normalizr を使用するアプリを持っています。何かが変更されたときにレンダリングの数を減らすためのベスト プラクティスを知りたいentitiesです。

エンティティ内のエンティティを 1 つだけ変更すると、その特定のエンティティを必要とするコンポーネントだけでなく、すべてのコンポーネントが再レンダリングされます

現在、react + redux プロジェクトに取り組んでいます。

また、normalizrを使用してデータ構造を処理し、再選択してアプリ コンポーネントの適切なデータを収集しています。

すべてうまくいっているようです。

葉のようなコンポーネントがストアからのデータを必要とする状況に陥っているためconnect()、コンポーネントにそれを実装する必要があります。

簡単な例として、アプリが、複数のユーザーがフィードバックを収集する本の編集システムであると想像してください。

アプリのさまざまなレベルで、ユーザーはコンテンツに貢献したり、コメントを提供したりできます。

チャプターをレンダリングしているとします。チャプターにはコンテンツ (および作成者) とコメント (それぞれに独自のコンテンツと作成者があります) があります。

現在、私はIDconnect()にreselect基づいてチャプターのコンテンツを作成しています。

データベースは normalizr で正規化されているため、実際には章の基本的なコンテンツ フィールドと作成者のユーザー ID しか取得していません。

コメントをレンダリングするには、章にリンクされたコメントを再選択できる接続コンポーネントを使用し、各コメント コンポーネントを個別にレンダリングします。

繰り返しますが、データベースは normalizr で正規化されているため、実際には基本的なコンテンツとコメント作成者のユーザー ID しか取得できません。

ここで、作成者バッジのような単純なものをレンダリングするには、別の接続されたコンポーネントを使用して、所有しているユーザー ID からユーザーの詳細を取得する必要があります (章の作成者をレンダリングするときと、個々のコメントの作成者ごとの両方の場合)。

コンポーネントは次のような単純なものになります。

そして、それは一見うまく機能します。

私は逆のことを試み、より高いレベルでデータを非正規化して、たとえばチャプターデータがユーザー ID だけでなくユーザーデータを直接埋め込み、それをユーザーに直接渡すようにしましたが、それだけです。非常に複雑なセレクターを作成しているように見えました。私のデータは不変であるため、毎回オブジェクトを再作成するだけです。

それで、私の質問は、connect()アンチパターンのサインをレンダリングするためにストアに葉のようなコンポーネント（上記のユーザーのような）を持っていますか？

私は正しいことをしていますか、それともこれを間違った方法で見ていますか?

レンダリング時に深くネストされたエンティティ データを自動的に挿入する方法はありますか?

redux でのストアの正規化に関する情報がたくさんあります。しかし、グラフからデータを表示したい場合はどうすればよいでしょうか?

私のデータは次のようになります

各エンティティにはデータがあります。

そのデータをページに表示したいのですが、すべてのデータが正規化されています。さらに、3 つのエンティティすべてのコンテナー コンポーネントが必要です。

これは、正規化の有無にかかわらず、redux で行うのは非常に難しいようです。推奨される対処方法があるはずです。

このようなサーバーからの異常な応答があります

このレスポンスを正規化して、すべての人との口述を受け取りたいと思います。だから、私はノーマライズを使用してこれを平らにします

しかし、このようにすると、「2人をマージすると、「子供」の値に等しくないデータが見つかりました。以前の値を使用しています。」というエラーが表示されます。normalizr を調整して、同じ ID を持つ人をマージするにはどうすればよいですか (エンティティを最新のデータで更新します)。

Normalizr は、エンティティの構造化された JSON リポジトリを作成するのに優れています。

posts正規化されたデータなどのリストを表示するケースが多くあります。postsAPI 応答がリストされている場所は、いくつかの重要なフィールドに限定されています。

これらのいずれかを表示するケースもありpostsますが、すべてのフィールドを含む完全な JSON エンティティを API から取得する必要があります。

これにどのように対処するのが最善ですか？

個別のレデューサー、サンク/サガ、セレクター、アクション?

Bpostは、API から取得した拡張バージョンをレデューサーに挿入するだけです。以前のセレクターなどを再利用していますか？

サーバーからの 2 つの応答を正規化し、normalizr を使用してストアに保存する必要があります。最初の応答でセクションが表示され、2 番目の応答で投稿が表示されます。セクションには多くの投稿があります。1 つの投稿には1 つのセクションのみを含めることができます。

最初の応答 (セクション):

2 番目の応答 ( posts ):

応答をこのスキーマに正規化したい:

応答がネストされていないため、スキーマを定義する方法がわかりません。