javascript - 如何将 Redux 与超大数据集和 IndexedDB 集成

标签 javascript redux

我有一个应用程序使用同步 API 来获取其数据,并且需要将所有数据存储在本地。 数据集本身非常大,我不愿意将它存储在内存中,因为它可以包含数千条记录。由于我认为实际数据结构不相关,因此假设我正在构建一个需要离线访问的电子邮件客户端,并且我希望我的存储机制是 IndexedDB(异步)。

我知道一个简单的解决方案是不将数据结构作为我的状态对象的一部分,只用所需的数据填充状态(例如 - 在触发 EMAIL_OPEN 操作时将电子邮件内容存储在状态中)。这非常简单,尤其是使用 redux-thunk 时。

但是,这意味着我需要在两件事上做出妥协:

  1. 用户数据不再是“应用程序状态”的一部分,尽管事实上它是。由于同步行为很复杂,将其从应用程序状态机中删除会损害 redux 概念的优雅(我理解它们的方式)
  2. 我真的很喜欢 redux 架构并且希望我的所有逻辑都通过它,而不仅仅是 View 状态。

有没有关于如何使用 redux 和非内存状态属性的最佳实践?我发现最难解决的问题是 redux 依赖于同步 API,因此我不能用异步状态对象替换我的状态对象(除非我完全删除 redux 并用我自己的异步实现和连接器替换它)。

我无法使用 Google 找到答案,但如果已经有关于该主题的良好资源,我也很乐意被指出。

更新: 问题已得到回答,但我想更好地解释我是如何实现它的,以防有人遇到它:

主要思想是使用简单的 redux reducer 维护客户端和服务器的更改列表,并使用连接器监听这些更改列表以更新 IDB,并使用客户端更改更新服务器:

  1. 当客户端进行更改时,使用 reducer 更新客户端更改列表。
  2. 当服务器发送更新时,使用 reducer 更新服务器更改列表。
  3. 连接器监听存储,并在状态变化时更新 IDB。还维护已修改项目的内部列表。
  4. 更新服务器时,使用修改项列表从 IDB 中提取增量并发送到服务器。
  5. 访问数据时,使用正常操作从 IDB 拉取(例如使用 redux-thunk)

这种方法唯一需要注意的是,由于真实状态存储在 IDB 中,因此我们确实失去了拥有一个状态对象的一些值(value)(并且更难倒带/快进状态)

最佳答案

我认为你的第一个预感是正确的。如果(!)你不能把所有的东西都储存在商店里,你就必须在商店里少储存一些。但我相信我可以让这个解决方案听起来更好:

IndexedDB 只是成为另一个端点,就像您使用的任何服务器 API 一样。当您从服务器获取数据时,您会将其转发到 IndexedDB,然后从那里填充您的商店。只要它不会变得太大或过时,商店就会得到它需要的东西并缓存它。

这实际上与 Facebook 使用其 API 没有什么不同。商店中永远不会有用户的所有数据。引用通过 ID 实现,并在需要时加载。

您可以将所有逻辑保留在 redux 中。只需像往常一样为用户操作和数据更改创建操作,获取您需要的数据并进行处理。接口(interface)仍然完全由用户数据定义,因为您总是在商店中拥有在需要时 GET TO 其余部分所需的信息。它只是有点浓缩,我。 e.您只保存邮件总数或邮箱 ID,直到用户导航到它为止。

关于javascript - 如何将 Redux 与超大数据集和 IndexedDB 集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33992812/

相关文章:

javascript - 如何根据定期的 Json 更新以动画方式自行排列列表?

JavaScript forEach() 调试 : code review?

javascript - 在 React 中创建更多元素

javascript - 无法在 React-Redux 中使用 VictoryBar 绘制条形图

Javascript 下拉表单数学计算

javascript - 如何在 Firefox 和 Chrome 中阻止指定脚本

javascript - 需要学习javaScript表单验证!

reactjs - Redux/Redux-Saga 中的回调是反模式吗?

reactjs - 在 axiosinterceptor 中调度 redux Action (非 react 组件)

javascript - Redux Thunk 尝试返回 promise