reactjs - 将 redux 与本地数据库结合使用

Question

我有一个离线 React Web 应用程序，其中所有数据都存储在本地 indexedDB 中。除了静态资源的文件托管之外，没有其他服务器。我现在开始考虑使用 redux，但我试图理解将更多数据移入存储和继续依赖数据库之间的权衡。将本地数据库与 redux 结合使用的惯用方法是什么？

目前，我的应用程序由多个容器组件组成，每个容器组件都从 componentWillMount 中的数据库获取数据。集成 redux 的一种选择是保持基本相同，唯一的区别是状态保存在存储中，并且使用操作和 thunk 获取数据。

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

将整个数据库加载到存储中似乎是不合理的，至少在我的情况下，这将是大约 10MB 的数据，也许更多。因此，我总是至少有一些组件需要在安装时继续获取其数据。但有一个数据子集是应用程序的核心，可以认为应该完整加载表(这可能是大约 5,000 到 10,000 个对象)。

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

<小时/>

编辑:我应该提到:我正在使用 Dexie ，这是一个非常非常棒的使用 indexedDB 的库。它速度快，有一个很好的查询界面，可以处理迁移等...我真的很想继续使用 Dexie，除非有充分的理由不这样做。

供引用，here's Dexie 的 github 上对此主题的讨论。一般的外卖形式是“视情况而定”。不完全是我正在寻找的答案，因此我希望尽可能获得更多见解。

Answer 1

用我迄今为止所发现的内容来回答这个问题。如果出现更好的答案，我将很乐意将其标记为已接受。

TL;DR:这确实取决于。惯用的做事方式确实是只要有意义，就将尽可能多的内容放入状态中。然而，在有意义的情况下从其他地方异步获取数据并不是不习惯的。否则，许多应用程序根本不切实际。

丹·阿布拉莫夫的egghead tutorial (甚至标题为“使用 Idiomatic Redux 构建 React 应用程序”)采用了将所有状态存储在存储中并定期将其持久保存为一个巨大 blob(或相关切片)的方法。

这样做的优点是您可以像往常一样使用 redux 存储，并且持久性本质上是透明的。如果您的数据足够小，这不是问题，那就太好了。

正如 @seanyesmunt 指出的，有 redux-persist，它基本上做了一个更复杂的版本。

当然，shortly after that然后，他重写了教程以从 API 获取数据。此时，您可以假装 API 是 IndexedDB，实际上没有什么不同。由于整体上没有完全确定的状态，您会失去 redux 的一些好处，但在许多情况下您别无选择。

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