使用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缓存我收到的任何数据的真正目的。