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

Flux+React.js - Caching API request responses

本文关键字：请求 响应 API 缓存 js- Flux+Rreact      更新时间：2024-02-29

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

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

  • 每篇文章都有详细信息页面UI，但没有articleById端点，所以我只在提取的数组中按id .find必要的文章

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

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

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

还是更好的方法是破解容器组件（这对所有3个列表都是一样的），以知道它是否应该触发启动API请求的操作？

谢谢！

使用存储

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

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

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

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

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

相关文章：