リアクト/ Reduxのは、フェッチとフィルタリングデータ

Question

私はアイテムの巨大なリストを持っている例えば貸し付けは、これは1000 +私たちは、このようなcontact type、contact location、assigned to、filter ASC,フィルタなどのフィルタの束を持って、リスト内の項目であるcontactsそれを呼び出すことができますDESC` 。ユーザーは必要なものを入力することができます。 Reduxのストアは、連絡先のすべてをフェッチした後、正規化オブジェクト

{ 
    "1": { 
    "name": "Home Simpson", 
    "type": "Lead", 
    "location": "California", 
    "created_at": "01/01/16" 
    }, 
    "2": { 
    "name": "Ned Flanders", 
    "type": "Client", 
    "location": "SpringField", 
    "created_at": "05/01/16" 
    }, 
    [...1000+] 
} 

におけるコンタクトから成る、それは、MAPと、ユーザ入力のオフに基づいて、クライアント側の接点の全てに亘ってフィルタリングする良いですか？

また、特定のフィルタに関連するすべての連絡先を取得するためにサーバーに別のリクエストを行う必要がありますか？

複数のパラメータであるため、クエリできるパラメータは1つだけではありません。したがってcontact.type ===： "Lead" || "クライアント" contact.location === "スプリングフィールド"

このサイズのクエリのベストプラクティスは、余分な要求に値するすべての一致する連絡先のサーバーへのトリップを行っているか、私たちのreduxストアクライアント側をフィルタリングし、サーバに負荷をかけないでください。

Answer 1

Reduxに関して：このクライアント側を自由にしてください。この種のフィルタリングは非常に速く、Reduxは遅くなることはありません。

一般的に、これは問題が起こることが実際に分かっていない限り、最適化したくないものです。 については、と言いますと、データが長年に渡って長年過ぎてしまっている可能性があります。これは非常に早すぎる最適化です。これの代わりに。あなたが知っている限り、ペイロードのサイズはこれよりもはるかに大きな問題かもしれません（連絡先オブジェクトの大きさはどれくらいですか？）

しかし、誰の言葉も必要ありません。ターゲットデバイスにデータセットを生成する（一般的なユーザーは何を使用していますか？最悪の場合はどうなりますか？）、パフォーマンスベンチマークでサンプルデータをフィルタリングします。私はあなたが行っているフィルタリングの種類がボトルネックになることはないと考えています。それは単なるO（n * 1）だと考えています。 n個の要素O（n）をフィルタリングして、各O（1）の単一の値をチェックします。

一方、フィルタが非常に複雑な非常に複雑なオブジェクトのリストがある場合は、結果が変わる可能性があります。たとえば、同じ3人の特定の人を知っている他のすべての連絡先を知っている連絡先をすべて探している場合は、複雑さが増し、ボトルネックに遭遇する可能性が高くなります。

いずれの場合でも、アプリケーションを早期に最適化する時間を費やす前に、自分自身をベンチマークすることをお勧めします。

Answer 2

IMO、フィルタデータへの適切な場所が減速ではなくセレクタに直接ではありません。 Reduxのドキュメントから

：

Computing Derived Data

再選択は、メモ化、構成可能なセレクタ関数を作成するためのシンプルなライブラリです。 Reselectセレクタは、Reduxストアから派生データを効率的に計算するために使用できます。

私は現在データのフィルタリングとソートにセレクタを使用しています。

1. 状態でデータが繰り返し表示されません。特定の方法でフィルタリングされたアイテムのコピーを保存する必要はありません。
2. 同じデータを異なるコンポーネントで使用することができ、それぞれ異なるセレクタ関数を使用してフィルタ処理します。
3. セレクタを組み合わせるには、すでにアプリケーションに含まれているセレクタを使用して、多くのデータ計算を適用します。
4. あなたが正しいとすれば、セレクタは純粋な関数となり、簡単にテストすることができます。
5. 多くのコンポーネントで同じセレクタを使用します。