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

时间:2016-11-30 20:54:15

标签: reactjs redux normalization react-redux

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

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

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

稍后,如果我需要id = 17的照片,我不需要再次请求它,我可以在我的商店使用它,对吧?或者我可能先从商店取出并请求异步以检查是否有更改。

当我访问越来越多的页面时,我将拥有一个巨大的商店对象,其中包含来自不同表格的大量元素,例如。照片,视频,用户配置,朋友等。我应该如何处理数据一致性?如果我需要一个我已经在10分钟前取出的物体,我应该再次申请吗?拥有如此大的商店对象是“健康的”吗?

我打算使用normalizr&重新选择在react-redux中操纵我的日期。

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

提前致谢!

法比奥

1 个答案:

答案 0 :(得分:2)

是的,规范化的Redux商店是标准推荐。有关详细信息,请参阅我的React / Redux链接列表中的Redux FAQ: Organizing Nested StateStructuring Reducers - Normalizing State ShapeSelectors and Normalization部分。

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

最后,为了在Redux商店中操作关系/规范化数据,我推荐一个名为Redux-ORM的库。你应该绝对使用Reselect,Normalizr适用于规范化你收到的数据,但是Redux-ORM提供了一个有用的抽象层,用于在存储中查询和更新规范化数据。我写过一些博客文章描述其用途:Redux-ORM BasicsRedux-ORM Concepts and Techniques