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

Question

我需要有经验的人帮我解决React+Flux+异步API请求模式下的问题。以下情况下最好的缓存api响应方式是什么：

• 我有3个文章列表页面，每个页面都对应一个API端点以获取数据。

• 每篇文章都有详细页面UI，但没有articleById端点，所以我只是在获取的数组中通过id查找必要的文章。

• 我想在列表上进行仅一次请求并将其缓存，这样当我从列表中进入详情页面或返回到列表时就不会发出API请求。

• 当我切换到另一个列表时，应该进行请求并将其缓存。

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

还是更好地在容器组件(对于所有3个列表都相同的组件)中实现hack，以了解它是否应该触发开始API请求的操作？

谢谢！

- Kosmetika

Answer 1

使用Stores

你应该拥有一个ListStore，它缓存处理以下操作的列表： LIST_CACHE：此操作将List推送到List缓存中。

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

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

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

如果你还没有阅读过这篇文章：http://facebook.github.io/flux/docs/overview.html

- Desmond Lee