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

Posted 2023-02-22

【中文标题】通量/反应：如何处理商店中过滤的 api 数据

【英文标题】：flux / react: how to handle filtered api-data in a store

【发布时间】：2016-09-01 05:53:08

【问题描述】：

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

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

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

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

【问题讨论】：

你试过.filter函数吗？喜欢this.getState().filter( element => element.color !== "blue")

遇到和你一样的问题，还在寻找解决办法。澄清一下：过滤发生在服务器端，这意味着当服务器返回过滤后的数据时，该数据将在存储中存在，这就是问题是。

【参考方案1】：

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

如果只是过滤客户端：

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

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

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

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