将redux与本地数据库一起使用

时间:2017-07-06 23:54:35

标签: reactjs redux dexie

我有一个离线的React Web应用程序,其中所有数据都存储在indexedDB中。除了托管静态资产的文件之外,没有其他服务器。我现在开始考虑使用redux,但我正在努力理解将更多数据移入商店并继续依赖数据库之间的权衡。使用带有redux的本地数据库的惯用方法是什么?

目前我的应用程序由几个容器组件组成,每个容器组件都从componentWillMount中的数据库中获取数据。集成redux的一个选项是保持这个大致相同,唯一的区别是状态保存在存储中,数据是使用动作和thunk来获取的。

或者,我已经看到很多示例代码在启动时将所有数据加载到商店中。这使整个应用程序更具确定性,更易于测试和重现。主要组件之间的切换将立即发生(以初始应用程序负载为代价)。但是我失去了数据库提供的好处,比如索引和好的查询。

似乎不合理地将整个数据库加载到商店中,至少在我的情况下,这将是大约10MB的数据,可能更多。所以我将至少有一些组件需要继续在mount上获取数据。但是有一个数据的子集是应用程序的核心,并且可以认为表应该完整地加载(这可能是大约5,000到10,000个对象)。

使用本地存储和redux的惯用方法是什么?我感觉如果可以避免,componentWillMount中的异步提取不是惯用的。即使在状态足够小以至于可以完全加载到商店的情况下,是否值得放弃使用高效查询界面的好处?

编辑:我应该提一下:我正在使用Dexie,这是一个非常非常好的库,用于处理indexedDB。它速度快,有一个很好的查询界面,处理迁移等...我真的想继续使用Dexie,除非有其他强有力的理由。

供参考,here's在Dexie的github上讨论这个主题。一般的拿走形式是“它取决于”。不是我想要的答案,所以我希望在可能的情况下获得更多的见解。

2 个答案:

答案 0 :(得分:5)

用我迄今为止发现的东西回答这个问题。如果我更好地回答,我会乐意接受它。

TL; DR:它确实依赖。做事的惯用方法确实只要有意义就可以放在状态中。但是,在有意义的情况下从其他地方异步获取数据并不是不恰当的。许多应用程序本来就是不切实际的。

丹·阿布拉莫夫egghead tutorial(甚至标题为“#34;使用惯用法构建反应应用程序 Redux"”)采用了在商店中拥有所有州的方法坚持将它作为一个巨大的斑点(或相关切片)定期。

这样做的好处是可以像往常一样使用redux存储,并且持久性基本上是透明的。如果您的数据足够小,这不是一个问题,这很好。

正如@seanyesmunt指出的那样,还有redux-persist,它基本上是一个更复杂的版本。

当然,shortly after that然后他重写了教程以从API获取数据。此时你可以假装API是IndexedDB,它真的没什么不同。你没有完全确定的状态作为一个整体而失去了redux的一些好处,但在很多情况下你别无选择。

我最终做的与Dexie's Redux sample code基本相同。基本上,使用thunks在某些操作上异步写入数据库。

答案 1 :(得分:2)

这个问题对我很感兴趣,而且我一直在为我上次参与的项目做出反应和dexie的详细阐述。我个人正在研究graphql如何解决这个问题,但我还在学习。我希望提供一个graphql / dexie的例子。据我所知,graphql将充当服务层,其“架构”(后端存储)将使用所需的dexie查询来生成更简单的graphql数据要求。我将看一些来自Apollo或Facebook的即用型grapql样本开始使用,我相信它会很简单。

我通常认为它不会扩展为将整个db读入内存。我相信应用程序启动对最终用户至关重要,所以我真的希望找到一个完美的架构。目前我的希望归功于Graphql。