在 React + Redux SPA SaaS 中处理大型存储中的数据一致性

IT技术 reactjs redux normalization react-redux
2021-04-03 05:43:48

因此,我们计划使用带有 React+Redux 前端服务器的 PHP 后端。我们正在开发一个非常大的应用程序,整个应用程序中有很多表。由于它将是一个单页应用程序,所有数据都包含在存储对象中。

所以,让我们看看我是否有正确的心态。当我登录应用程序时,我的状态几乎是空的。当我访问页面时,我的状态将开始填满。示例:我访问应用程序的“照片”,然后我最终会从我的数据库加载一些照片并将其放入我的商店:

state{ 
...
photos: [1: {...}, 3: {...}, 17:{...}] 
... 
}

后来,如果我需要 id = 17 的照片,我不需要再次请求它,我可以从我的商店使用它,对吗?或者我可能先从商店拿它并请求它异步以检查它是否有变化。

随着我访问越来越多的页面,我将拥有一个巨大的 store 对象,其中包含来自不同表格的许多元素,例如。照片、视频、user_configurations、朋友等。我应该如何处理数据一致性?如果我需要一个 10 分钟前已经获取的对象,我应该再次请求它吗?拥有这么大的存储对象是“健康”的吗?

我打算使用 normalizr & reselect 来操纵我在 react-redux 中的日期。

有什么想法吗?我想听听您认为如何处理这种情况的好方法。

提前致谢!

法比奥

1个回答

是的,标准化的 Redux 存储是标准建议。有关更多信息,请参阅Redux 常见问题解答:组织嵌套状态结构化减速器 - 规范化状态形状以及我的 React/Redux 链接列表选择器和规范化部分。

至于缓存数据,从概念上讲,这应该与任何其他客户端设置没有什么不同。无论您使用的是 Redux、Angular、Ember、Backbone 还是其他东西,存储大量数据都会占用类似的内存量。您可以决定要缓存多少,以及何时以及如何清除缓存数据。

最后,为了操作 Redux 存储中的关系/规范化数据,我推荐一个名为Redux-ORM的库一般来说,您绝对应该使用 Reselect,Normalizr 非常适合规范化您收到的数据,但 Redux-ORM 提供了一个有用的抽象层,用于查询和更新存储中的规范化数据。我写了几篇博客文章来描述它的用法:Redux-ORM 基础知识Redux-ORM 概念和技术

它们之间有一些重叠。Redux-ORM 可以使用 Reselect 生成一些选择器,我在一些 Reselect 选择器中使用 Redux-ORM。我实际上使用 Redux-ORM 来解析和规范化传入的数据,它确实取代了您使用 Normalizr 的目的,尽管涉及一些注意事项(根据我的第二篇博文)。
2021-05-29 05:43:48
哇!谢谢,马克!感谢您提供的材料,这正是我现在需要的。还要感谢使用 Radux-ORM 的建议,它是否完全取代了 normalizr 并重新选择?我不致力于任何一个,我会明确地看一看。
2021-06-15 05:43:48
假设这回答了问题,介意接受答案吗?:)
2021-06-15 05:43:48