Redux State组织提案

使用Redux时，很难开始组织您的状态。我见过很多学生在旅途中添加属性，因为他们需要它们。这种疯狂的策略可能会导致您因巨大的国家而遭受可怕的技术债务。

例如，当遵循该策略时，您最终可能会遇到以下情况：

尝试想象这一点，但有近50个属性和更大的列表。

我在上述状态中发现的问题是所有属性都是混合的。

• auth_token将主要以中心化方式使用：ApiClient服务或中间件。
• 电影是一个实体列表。它将在整个应用程序中用于呈现应用程序提供的信息。
• 提取是一个表示标志，我们将在特定视图（Component）中使用它，以便显示加载微调器。

我们可以看到属性在大小方面是如何混合的 – 因为电影（数据）与获取（标记）和使用不具有相同的重要性 – 因为它们在完全不同的地方和时间使用。

这两点可能会影响设计，混合状态组织可能会影响我们选择器的模块性（mapStateToProps）。

建议的解决方案

经过一番尝试，我找到了一个解决上述问题的州组织。它最终非常灵活，适合一些具有不同结构的项目。

使用combineReducers创建此状态，以定义由不同reducer控制的单独状态部分。请注意，我使用速记属性名称来定义对象的属性：身份验证是身份验证的简写：身份验证，是我稍后将描述的第二个reducer函数。

身份验证Reducer

身份验证reducer用于存储和控制与当前登录用户相关的所有数据。如果您的应用中没有任何身份验证策略，则可以跳过此部分。在其中，您可以保存当前用户对象，身份验证令牌等内容。这非常有用，例如，当您想要记住会话时，因为它可以在创建存储时保持和预加载。这是Dan Abramov的一个非常酷的教程，解释了如何轻松地做到这一点。

这个的reducer将监听与身份验证相关的特定操作类型：SIGN_IN_SUCCESS SIGN_UP_SUCCESS LOG_OUT …

实体减速器

这是减速机中最特殊的部分。我们习惯于看到基于action.type的巨大切换的reducers，其中包含状态的转换列表。但是这个将用不到20行代码来控制前端的整个数据集。

我们的想法是，状态的这个属性存储了一个本地数据库，其中包含我们必须使用的所有实体，并且已经在某些时候从后端提供给我们。假设我们继续电影示例，那么这可能是一个可能的状态：

如您所见，状态被分成不同的实体组，这些组不是数组，而是具有与每个实体的每个对象的ID相关的键的对象。这样可以避免重复。主要的想法是，这可以作为一个迷你本地关系数据库：没有重复，但引用。通过避免嵌套，我们可以更轻松地关联数据并避免不一致。

如果您的数据都是本地数据，那么以这种方式管理它就没有问题，但如果您正在使用API​​，则很可能会以嵌套方式提供数据。为了将数据处理成我们的格式，您可以使用normalizr。经过一些配置后，它将能够平滑调用函数normalize。它将返回一个具有两个属性的对象：实体和结果。实体将以我们的格式获取和标准化数据;结果将是您刚刚获取的根实体的ID关系。

实体多么巧合，是吧？实际上并非如此。我从Redux的真实世界示例中获得了这种模式，它使用Github的API，在其之后对其数据进行标准化。

由于这种格式，我们可以编写一个reducer，只需几行就可以控制整个实体部分

每当我们的行动包括房地产实体时，它将与我们当前的州的实体价值合并。

警告：这个reducer只是添加或覆盖数据，没有从我们的州删除数据的情况。有些人可能会说它不需要，因为删除可以被视为对元素的删除标志的修改（软删除）。你怎么看？有否改善此案的提案？我们在评论中进行辩论吧

Pages Reducer

凉我们所有的数据都在自动处理并合并到州内不过我们应该小心：我们的数据存储在对象中，没有数组，所以没有顺序。

我们应该保持后端提供的结果的顺序，他们可能会花费大量的资源（所以钱?）来决定电影呈现给每个用户的顺序（Netflix，某人？）。但通过规范化他们我们忽略了那个顺序。这就是为什么normalizr还给出了结果，即表示获取资源的ID关系。

您获取了ID为101的单个电影（API响应对象）？结果属性为101;获取ID为101和100的电影数组（API发送数组）？结果将是这个数组（101,100）（保持顺序）。请参阅以下示例：

请注意，原始响应是一组电影，规范化对象的results属性也是一个数组，保持原始顺序。

此结果数组的实体reducer中没有空格，因此我们必须将其设置到另一个位置：页面缩减器。页面缩减器是关于不同页面为了呈现其信息所需的局部变量。元素的数组，加载标志，如果不使用redux-form，可能是form-data。基本思想是，虽然实体reducer正在从资源中保存数据，但页面缩减器存储与渲染屏幕相关的数据。

如您所见，在将状态映射到容器中的props时，我们创建的数组将结果中的所有元素（state.pages.boxOffice.myListMovies，ID列表）映射到实体中的实际数据。

我们的想法是将state.pages属性再次拆分为您在应用中显示的所有页面的集合。例如，路由React Router加载的每个组件。

总结

此结构将帮助您轻松扩展数据驱动的应用程序。如果必须添加其他类型的实体，则不会影响页面的结构。如果要添加另一个以不同方式加载现有实体的屏幕，则可以使用页面缩减器而无需担心数据控制。所有这些都将帮助我们遵循简单的事实原则，这将帮助您避免在开发过程中出现许多问题。

将来，我想用这种模式写下Redux的Reselect。

让我知道你在评论中的想法，让我们讨论更好的做法或修改。

快乐的编码