使用Flux模式的Relay缓存?

4

我希望将Relay缓存整合到我的Flux store中,以便进行“时间旅行”,深入了解应用程序。

看起来Relay存储和操作都是不可序列化的类,这很遗憾。但是,看起来我应该能够将缓存与网络请求分离,并将缓存保存在Flux store中。

这听起来有趣吗?还是说我在错误的方向上努力?

1个回答

4

Relay 可以与 Flux 配合使用,我们与许多开发人员交流过,他们已经成功地将它们一起使用。一般的模式是让 Relay 拥有服务器数据缓存并管理与服务器的通信,并使用 Flux 存储和更新仅在客户端的数据。

从 Flux 中读取 Relay 数据

如果 Flux 存储需要访问服务器数据,它们可以使用 Relay.Store API 从服务器获取数据并从缓存中读取:

// build a query 
var query = Relay.createQuery(Relay.QL`query { ... }`, {var: 'value'});
// fetch any missing data for this query
Relay.Store.primeCache({query}, readyState => {
  if (readyState.done) {
    // read data once the cache is populated
    var data = Relay.Store.readQuery(query)[0];
  }
});

检查Relay缓存

Relay不直接支持时间旅行调试。但是,我们正在积极开发Relay的开发人员工具,最初版本很快就会推出。与此同时,有几个选项可以检查缓存的状态:

  • 拦截并记录Relay存储库中所有低级别更新。这可以通过注入一个带有RelayStoreData.getDefaultInstance().injectCacheManager(...)的缓存管理器来完成(请注意,API名称可能会更改,但缓存管理器API本身是稳定的)。CacheManager接口在此处定义 - 请注意,这将允许您记录写入Relay缓存的所有值,以构建任何您想要的数据可视化。写入缓存管理器的所有字段值都是可JSON序列化的。请注意,缓存管理器无法将数据写回到存储库中,因此这主要允许您查看缓存的当前状态。
  • 通过注入自定义网络层,拦截所有查询和变异请求的网络层。这将指示您的应用程序正在请求什么数据以及从服务器接收到什么数据。

有趣。所以我可以注入自己的缓存管理器,通过我的Flux存储分派操作,并以相同的方式拦截变异和网络请求。嗯。我仍在努力弄清楚如何从缓存中同步加载数据,而不是渲染加载并等待快速往返... - Chet
Relay不支持同步从缓存中加载数据,因为加载可以是异步的,所以API始终是异步的,以保持一致性。 - Joe Savona
那么如果数据已经在缓存中,你还是必须首先显示加载屏幕吗? - Chet

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接