問題タブ [reselect]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
redux - すべてのデータ アクションが完了するまで再選択の再計算を防止する
非常に一般的な Redux (まあ、rxjs-store) 構造があります。基本的に、私のデータ型は、「要素」と呼ばれる汎用データ構造のすべての異なるバージョンです (それぞれが異なる「ElementType」で定義されています)。
目標は、新しいデータ オブジェクトが登場したときに、まったく新しいデータ オブジェクトのセットをストア、API、バックエンド、データベースなどに追加する必要がないことです。
これはこれまでのところうまく機能していますが、Redux & Reselect でセレクターが複数回再計算されるという問題に遭遇しました。
これが例です。私のページでは、特定のタイプの要素の 4 つのセットをロードする必要があります。
elementTypeManager と elementManager は Redux アクションを送信するサービスであり、次のように reselect を使用してストアをクエリします。
このLoad Elements
アクションは、データを取得するための http 要求をトリガーしStore Elements Data
、レデューサーが実行してストアに入れるアクションを発行します。
再選択セレクターは非常にシンプルで、次のようになります。
要素を受け取り、指定されたタイプでフィルタリングします。
問題は、アクションが順番に呼び出されることです。
次に、順番に保存します。
レデューサーがデータをストアに入れるたびに、reselect が再計算します。もちろん、まだすべてのデータを入れ終わっていないので、他のセレクターは 0 の結果を返します。
その結果、 myCombineLatest
は 4 回出力します。1 つはDistributionNetworkNode
データのみ、1 つはDistributionNetworkNode
andSocket
データ、もう 1 つはDistributionNetworkNode
,Socket
およびArea
データなどです。
これは、データの構造化方法と再選択の使用方法に関する継続的な問題であり、データの一般的な構造化方法を損なうことなく克服する方法がわかりません.
再選択でデータをクエリ/発行する前に、すべての要素データの格納アクションが実行されたことを確認するにはどうすればよいですか?
javascript - 配列を記憶するために「再選択」をどのように使用しますか?
この状態構造を持つ redux ストアがあるとします。
このストアは、アイテムのまったく新しい価値を受け取ることによって進化します。
状態の一部のみを抽出する SubItem ビューのリストをレンダリングするルート ビューを表示したいと考えています。たとえば、SubItem ビューは foos のみを考慮し、それを取得する必要があります。
私は状態の「サブパート」のみを気にするので、それを「ダム」ルート ビューに渡したいと思います。
このコンポーネントを簡単に接続して、状態の変更をサブスクライブできます。
私の根本的な問題は、私が気にしない状態の部分 ( bar
) が変化するとどうなるかということです。foo
または、どちらもbar
変更されていないアイテムの新しい値を受け取った場合でも、次のようになります。
「素朴な」セレクターの実装を使用する場合:
次に、リストは呼び出されるたびに完全に新しいオブジェクトになり、私のコンポーネントは毎回レンダリングされます。
もちろん、接続されたコンポーネントが純粋であるため、常に同じリストを返す「定数」セレクターを使用すると、再レンダリングされます (ただし、これは、接続されたコンポーネントが純粋であることを示すためのものです)。
リストが変更されているが同じ要素が含まれている「almostConst」バージョンを使用すると、これは少しトリッキーになります。
予想通り、リストが異なるため、内部のアイテムは同じですが、コンポーネントは毎秒再レンダリングされます。
これは、「再選択」が役立つ可能性がある場所ですが、ポイントを完全に見逃していないかどうか疑問に思っています。私はreselect
これを使って振る舞うことができます:
しかし、その後はナイーブ バージョンとまったく同じように動作します。
そう:
- 配列をメモ化しようとするのは無意味ですか?
- これを再選択できますか?
- 州の組織を変更する必要がありますか?
- 「deepEqual」テストを使用して、ルートに shouldComponentUpdate を実装する必要がありますか?
- Root が接続コンポーネントであることをあきらめて、各 LeafItems を接続コンポーネント自体にする必要がありますか?
- immutable.js は役に立ちますか?
- Reactはスマートで、仮想DOMが計算されると何も再描画しないため、実際には問題ではありませんか?
私が彼の無意味なことをしようとしている可能性があり、私のreduxストアに問題が隠されている可能性があるので、明らかなエラーを遠慮なく述べてください.