通量/反应：如何处理商店中过滤的 api 数据

Question

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

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

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

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

Answer 1

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

如果只是过滤客户端：

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

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

1. 与上述相同，但将完整的项目存储在filteredCollection 而不仅仅是ID。 （除非您最终会在内存中拥有大量数据，在这种情况下，您可以考虑维护一个集合，您可以在每次从服务器获取时增加该集合，然后从中过滤，但这会增加很多复杂性，我不会'除非你确定你有记忆问题，否则不推荐。）

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