使用ngrx/store angular進行搜索2

Question

我正在嘗試爲以角4寫的應用程序實現搜索功能。它基本上用於顯示大量數據的表。我還添加了ngrx商店。 在商店中實施應用程序搜索的正確方法是什麼？ 目前，我正在爲搜索查詢每隔一次清除商店，然後用從異步調用接收到的數據填充到後端。然後我在HTML中顯示這些數據。異步調用是從一個效果文件中完成的。

Answer 1

我最近使用Angular 4和@ngrx實現了一個搜索功能。 我這樣做的方式是派遣一個EXECUTE_SEARCH操作來將查詢字符串設置到您的商店並觸發一個效果。該效果觸發了異步調用。當異步調用返回時，我根據結果調度了FETCH_SUCCESSFUL操作或FETCH_FAILURE操作。如果成功，我將結果放入我的商店。

當您清除存儲結果時，確實取決於所需的行爲。我的項目中，我清除了FETCH_SUCCESSFUL上的結果，取代了舊結果。在其他使用情況下，當您執行新搜索時（在EXECUTE_SEARCH減速器中），清除存儲結果可能是合理的。

Answer 2

好了，因爲我沒有找到這個問題的一個長期我把保存任何數據是從後端來，然後在下面的方式搜索的數據的方法回答：

我實現了一個搜索效果，這將啓動對後端的異步調用。從後端我返回搜索結果以及他們的ID。收到數據後的這種效果會觸發搜索完成操作。然後，在這個Reducer動作中，我使用名稱searchIds將結果的id存儲在我的狀態中，並且我創建了一個名稱實體的狀態，該狀態基本上是以ids爲關鍵字的數據映射。

將從後端接收的數據將進行過濾，以檢查它是否已存在於商店中，如果不存在，則將其附加到實體。之後，我訂閱了一個選擇器，它將基本查找searchIds中存在的鍵並僅從實體返回該數據。由於它是一張已經有ID作爲鍵的地圖，因此根據searchIds進行搜索非常高效，而且我也不必清除已有的數據。這反過來又保持了@ ngrx/store緩存我收到的任何數據的真正目的。