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

Posted 2023-02-22

【中文标题】Flux+React.js - 缓存 API 请求响应

【英文标题】：Flux+React.js - Caching API request responses

【发布时间】：2015-04-23 22:17:25

【问题描述】：

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

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

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

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

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

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

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

谢谢！

【参考方案1】：

使用商店

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

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

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

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

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