Question

我有一个React / Redux应用程序，可以与API进行大量对话，并处理很多来自数据库的很少变化的数据。为了减少流量并改善UE，我现在想要创建一种缓存机制，通过自动使用可用的最佳技术（从IndexedDB降级到LocalStorage等）在客户端上存储数据。

我创建了一个cache对象，它执行初始检查，确定存储机制（保存到引擎属性，因此检查只需运行一次）。它还有一些基本方法save(key, value)和load(key)，然后为最初确定的机制调用适当的函数。

缓存对象及其方法确实有效，但我想知道如何在应用程序加载时只在我的主index.js中创建一次缓存，然后在我的操作中使用这个对象，而不是每次都重新创建另一个缓存对象时间？

BTW：将缓存作为我的应用程序状态的一部分感觉不对，因为它实际上并不包含运行应用程序的实质数据（如果没有可用的缓存，则它会回退到只调用API）。

我是否需要以某种方式将注入缓存到我的操作中？或者我是否需要在主window对象中创建全局/静态缓存对象？

感谢您对此问题的澄清和想法。

Answer 1

redux-thunk中间件提供了您可以使用的custom argument injection功能。

创建商店时

const cache = createCache()

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(cache))
)

然后在你的动作创作者

中

function getValue(id) {
  return (dispatch, getState, cache) => {
    // use cache
  }
}