問題タブ [reselect]

私のアプリケーションでは、React + Redux + Reselect + Immutable.js の究極の組み合わせを使用しています。再選択のアイデアが気に入っているのは、状態 (リデューサーによって維持される) をできるだけ単純に保つことができるからです。セレクターを使用して、必要な実際の状態を計算し、それを React コンポーネントに渡します。

ここでの問題は、レデューサーの 1 つを少し変更すると、セレクターが派生出力全体を再計算し、その結果、React UI 全体も更新されることです。純粋なコンポーネントが機能しません。遅いです。

典型的な例: データの最初の部分はサーバーから取得され、基本的に不変です。2 番目の部分はクライアントによって維持され、redux アクションを使用して変更されます。それらは別々のレデューサーによって維持されます。

セレクターを使用して両方のパーツを単一のレコード リストにマージし、それを React コンポーネントに渡します。しかし、明らかに、オブジェクトの 1 つを 1 つ変更すると、リスト全体が再生成され、Records の新しいインスタンスが作成されます。また、UI は完全に再レンダリングされます。

明らかに、毎回セレクターを実行することは正確に効率的ではありませんが、それでもかなり高速であり、そのトレードオフを喜んで行います (コードがよりシンプルでクリーンになるため)。問題は、実際のレンダリングが遅いことです。

Immutable.js ライブラリは、何も変更されていない場合に新しいインスタンスを作成しないほどスマートであるため、新しいセレクター出力を古いものと深くマージする必要があります。しかし、セレクターは以前の出力にアクセスできない単純な関数であるため、それは不可能だと思います。

私の現在のアプローチは間違っていると思います。他のアイデアを聞きたいです。

おそらく、この場合の再選択を取り除き、インクリメンタル更新を使用して目的の状態を維持するレデューサーの階層にロジックを移動することです。

一部ownPropsのmapStateToProps.

オブジェクトの配列としていくつかのデータがあります。redux と react-redux でソートまたはフィルタリングします。

私の初期状態:

フィルタリングとソートはUIの扱いなので、コンテナ（スマートコンポーネント）に実装しようとします。過去数日間 redux,react-redux のドキュメントを読んでいて、reselectを使用する必要があることがわかりました。そこで、2 つのセレクターを作成しました。並べ替えられた最新のデータ配列を格納する sortData と、フィルター処理された最新のデータ配列を格納するfilterDataです。

セレクターの引数 - セレクター監視のフィールド:

sortData :

フィルターデータ:

上記のように、私のセレクターfilterDataはsortDataに依存していますが、その逆ではありません。filterData を呼び出すときはフィルター計算のみを呼び出しますが、データを並べ替えようとすると、並べ替えとフィルターの両方を呼び出します。

私のmapStateToProps :

「データのフィルター」をクリックすると、最新の並べ替えられた配列をフィルター処理し、「データの並べ替え」をクリックすると、最新のフィルター処理された配列を並べ替えます。 私の質問:

1. 再計算せずにこの機能を作成するにはどうすればよいですか?
2. reselectなしで実装できますか?

PSダン・アブラモフの例を読みましたが、残念ながら、それを自分のタスクの解決に適用することはできませんでした. その他のコード:ここにリンクの説明を入力してください

反応コードに再選択を追加しようとしていますが、常に再レンダリングしているようです。

状態を変更するたびに、入力セレクターが変更されていなくても、コンソールに「testing」と出力されます。何が起こっているのかを示す簡単なテストを作成しました。

私は何を間違っていますか?? 私はドキュメントを読み続けており、入力セレクターが変更されていないため、console.log は初めて実行されるべきではないことがわかります。私はそれを正しく理解していますか？

TabNews エクステントが Fragment を拡張しています。このタブが再選択されたときに、このタブをリロードしたいのですが、どうすればよいですか?

変更ごとに非正規化を回避するために denormalizr でreselectを使用していますが、これが本当に何かを改善しているかどうかはわかりません。