Flux+React.js - 缓存 API 请求响应

Question

我需要有 React+Flux+async API requests 模式经验的人的意见。在以下情况下缓存 api 响应的更好方法是什么：

• 我有 3 个文章列表页面，每个页面都有相应的 API 端点来获取数据。

• 每篇文章都有详情页UI，但没有articleById端点，所以我只是.find获取的数组中的必要文​​章ID

• 我只想在列表中发出1个请求并缓存它，所以当我从列表中转到详细信息页面或返回列表时，将没有 API 请求.

• 当我切换到另一个列表时，我应该发出请求并缓存它。

我想知道是否应该在发出实际请求的 WebAPIUtils 服务中缓存响应？

或者更好地破解容器组件（所有 3 个列表都相同）以知道它是否应该触发启动 API 请求的操作？

谢谢！

Answer 1

使用商店

您应该有 ListStore 来缓存处理以下操作的列表： LIST_CACHE ：此操作将列表推送到列表缓存。

在您的 List 组件中，当它从 ListStore 接收到更新时，尝试找到它应该显示的 List 并将其设置为它的状态。

如果列表不存在，请等待 ListStore 发出 change 事件，然后在 ListStoreChanged 处理程序中，再次尝试查找列表。

现在您需要决定何时向列表缓存发出 API 请求。一种可能的选择是在您的应用加载时向 所有 列表发出 API 请求，然后将所有接收到的列表分派到 LIST_CACHE 操作。

如果您还没有，请阅读：http://facebook.github.io/flux/docs/overview.html