javascript - 通量/ react : how to handle filtered api-data in a store

Question

我创建了一个应用程序，它使用通量模式并从 API 中提取数据。 这是更新数据现在的工作方式:

1. 组件调用get() Action
2. 该操作从 API 中提取数据
3. 该操作将一个 storechange 事件分派(dispatch)给包含新数据的相关存储
4. 商店使用从操作中接收到的有效负载更新其状态并发出 View 更改事件
5. 该组件监听 viewchange 事件，从商店中拉取新项目并重新呈现

到目前为止一切正常。但现在我想知道我将如何进行过滤。例如。对于特定组件(“通知”)，我只想返回未读通知或给定时间段内的通知。 当我执行 getByStatus(status) getByDate(start, end) 操作时，整个商店将只包含未读通知或时间段内的通知，这是一个问题当您想同时显示所有通知和未读通知时。

唯一的方法是使用 javascript/lodash 或类似的方法创建过滤器方法吗？这将使服务器端的任何过滤都过时并导致大量(不需要的)流量。 并且创建像“UnreadNotificationStore”这样的单独存储会非常烦人，并且在时间段的情况下问题仍然存在。 我能想到的唯一方法是添加 getByStatus(status) 操作而不更新存储，并将数据直接返回给组件。

Answer 1

您实际上是在谈论从客户端内存中已有的有效负载中过滤项目，还是您需要从服务器为这些“过滤器”进行新的提取？

如果只是过滤客户端:

1. 将所有获取的项目存储在商店的 collection 分支中。
2. 调度您的过滤器选择并将其存储在 filter 变量中。
3. 使用类似@cley 建议的.filter 方法过滤您的集合，并将过滤后的ID 存储在filteredCollection 变量中。
4. 向您的商店添加一个 getter，例如 getFilteredItems，它返回映射到 collection 中完整记录的过滤 ID。

如果每次都从服务器获取:

1. 与上面相同，但将完整项目存储在 filteredCollection 中，而不仅仅是 ID。 (除非您最终会在内存中存储大量数据，在这种情况下，您可以考虑维护一个集合，每次从服务器获取数据时都会对其进行扩充，然后从中进行过滤，但这会增加很多复杂性，我不会除非您确定您会遇到内存问题，否则不推荐。)

还有许多其他可能性，但这是一个合理的起点。