在数据层或 React 状态层处理缓存

Question

启动一个新的 React 应用程序，并且真的想尝试避免添加 Redux，而只是使用钩子在本地完成所有操作。我现在遇到的一个问题是，在页面导航之间，我经常重新加载数据。

我知道我可以将这些数据存储在上下文 API 中。

但是，我想知道如果我只是在服务客户端层编写缓存逻辑会怎样。我所有的 React 视图都会在每次挂载/更新时请求数据，但是关于是从缓存还是网络中获取的决定将发生在某个 ApiController 级别。

通常，我会将规范化数据存储在我的 Redux 状态上，但这总是变得有点难以管理。

这有意义还是反模式。

Answer 1

我已经使用这种逻辑构建了一个现在在生产中的应用程序。每当我获取大量数据(即某种列表(时，基本上就是这样：

1. View 使用onSuccess和OnFailure回调以及API调用函数向DataManager(单例(请求数据。
2. 然后，DataManager 通过 AsyncStorage 检查与请求匹配的先前数据是否在内存和/或磁盘上。如果是这样，它调用了onSuccess回调。
3. DataManager 进行了 API 调用以获取更新的数据，并再次调用 onSuccess，这会使用最新数据更新视图。
4. 如果发生任何错误，则会调用 onFailure 回调。

如果你想要一些不太复杂的东西，你可以使用 react-navigation，它让视图在挂载/卸载之间保持状态。