在现实生活中的Redux-way

时间:2017-03-31 03:55:21

标签: reactjs redux

我想向社区询问一个意识形态问题。 让我们想象一下react / redux上的todo-list,你有单个状态,其中提供了todoItems数组。但现在让我们想象一下,我想在页面上有几个组件,它们使用不同的UI渲染todoItems。我需要更新todoItems的CRUD上的每个组件。您对此问题的架构方法是什么?不要忘记我们有一个大型数据库,我们只能通过分页获得todoItems。

更新

让我们说清楚。当我们使用此UI实现redux生命周期时,我们有两个选项:

1)将一个todoItem数组服务到singleton redux状态对象中。 优点:我们所有的组件都会通过对象更改来更新。 问题:我们无法从数据库中获取所有数据,但必须显示不同的分页/过滤数据,因此我们无法在前端实现分页/过滤。我们有一些不同的组件,必须呈现不同的对象集合。所以它不合适。

2)我们可以在全局redux状态中使用不同的键。 优点:我们可以独立获取每个组件的数据 问题:当其中一个对象发生变化时,其他组件将感觉不到。在这种情况下,我们必须编写自定义代码。

我只是想知道也许我错过了一些东西,我们还有其他选择,或者有人对这个问题有很好的架构方法。

1 个答案:

答案 0 :(得分:2)

我打赌你的并发症来自于redux社区中很不常见的观点:试图保持redux形状尽可能接近UI形状。

不要将redux州视为Component州的替代品。 redux应该知道的只是实际待办事项(身份证,头衔,创建日期等)。让Component - 特定数据(如分页内容)生效在Components州。当用户转到其中一个Components的下一页时,应该更新的是ComponentpageNumberfromto,{{1}等等)。只有在缺少必要的待办事项时才应更新amount

有用的类比是将您的redux视为旧的SQL数据库:redux存储状态是数据本身,reduxselectors是查询和存储过程,actions是包含所选数据的视图。

更新好的,好像您正在寻找的是州标准化。从React Components列表中分离todos个详细信息。这样,所有ids都会感知todo字段的更新。另一方面,您可以在不同的Components中保留todos的单独集合。即使州看起来像这样:

Components

在这种情况下实现分页只需要从后端获取下一页的{ funnyTodos: [ 'id1', 'id2' ], boringTodos: [ 'id3', 'id4' ], recentlyDoneTodos: [ 'id1' ], todos: { id1: { name: .... }, id2: { name: .... }, id3: { name: .... }, id4: { name: .... }, } } todos列表,然后为给定的ids加载丢失的todos