ngrx/store angle 2で検索を実装する

Question

角度4で書かれたアプリケーションの検索機能を実装しようとしています。基本的には、多くのデータを表示しているテーブルです。私はngrxストアも追加しました。 ストアでアプリケーションを検索する正しい方法は何ですか？ 現在、私は検索クエリのために毎回ストアをクリアしています。そして、バックエンドへの非同期呼び出しから受け取ったデータでそれを設定しています。私はこのデータをHTMLに表示しています。非同期呼び出しは、エフェクトファイルから行われます。

Answer 1

最近、Angular 4と@ngrxで検索機能を実装しました。 EXECUTE_SEARCHアクションをディスパッチしてクエリ文字列をストアに設定し、エフェクトをトリガーする方法でした。その結果、非同期呼び出しがトリガーされました。非同期呼び出しが返されると、結果に基づいてFETCH_SUCCESSFULアクションまたはFETCH_FAILUREアクションのいずれかがディスパッチされました。成功した場合は、結果を自分の店に設定します。

ストアで結果をクリアすると、本当に目的の動作に依存します。私のプロジェクトでは、FETCH_SUCCESSFULの結果をクリアして、古い結果を置き換えました。他のユースケースでは、EXECUTE_SEARCH減速機で新しい検索を実行したときにストアからの結果をクリアするのが妥当かもしれません。

Answer 2

まあ、私は長年のために、この質問に対する答えを見つけられませんでしたので、私は、データがバックエンドから来て、その後の方法は次のデータを探していたものは何でも節約のアプローチを取った：

私は実装バックエンドへの非同期呼び出しを起動する検索エフェクト。バックエンドからは、検索結果とIDの両方を返していました。データを受け取った後のこの効果は検索完了アクションを発生させる。そして、このレデューサーのアクションでは、私はsearchIdsという名前で私の状態に結果のIDを格納していました。そして、私は基本的にidをキーとするデータのマップである名前エンティティを持つ状態を作成しました。

バックエンドから受け取るデータは、ストアにすでに存在するかどうかを確認するためにフィルタリングされます。存在しない場合はエンティティに追加されます。その後、私は基本的にsearchIdsに存在するキーを検索し、そのデータのみをエンティティから返すセレクタを購読しました。すでにIDをキーとして持つマップだったので、searchIdsに基づいて検索するのは非常に効率的でしたし、すでに持っていたデータをクリアする必要もありませんでした。これは、次に、受け取っていたデータをキャッシュするための@ ngrx /ストアの真の目的を維持しました。