Redux 嵌套减速器或规范化状态？答案

【问题标题】：Redux nested reducers or normalize state?Redux 嵌套减速器或规范化状态？
【发布时间】：2016-06-04 23:47:36
【问题描述】：

我正在使用 React 制作一个表单组件，并希望使用 Redux 存储表单和字段状态。

所以我有一个 form reducer 和一个 formField reducer。

我首先按照自己的直觉尝试将 formField reducer 嵌套在 form reducer 中。这基本上意味着在 form reducer 和 formField reducer 中都有与 formField 相关的 switch case。

这感觉有点乱（重复代码），所以我在文档中阅读了更多内容，发现建议对状态进行规范化。所以我把嵌套的formFields拿掉了，和forms放在同一个层级。

这使得reducer 变得干净整洁，但是现在检索特定表单的formFields 感觉很糟糕。我基本上每次都遍历所有的formFields，并且只返回具有正确“formId”参数的那些。

Redux 文档声明您应该将状态视为规范化数据库，但他是否忘记了您没有查询结果的奢侈？

我在这里错过了什么吗？解决此问题的推荐方法是什么？

【问题讨论】：

【解决方案1】：

据我了解，您的问题是关于查询派生数据。（即属于表单 X 的字段）。

还有一个名为reselect 的实用工具，您的用例似乎符合它所解决的问题。

您只需要编写一个需要 formId 的选择器，它会返回一个表单字段数组。

【讨论】：

【解决方案2】：

听起来您将formFields 状态保留为数组，但想以formId 为键将其作为对象进行查询：

这使得reducer 变得干净整洁，但是现在检索特定表单的formFields 感觉很糟糕。我基本上每次都遍历所有的formFields，并且只返回具有正确“formId”参数的那些。

如果将formFields状态改为对象，查询起来会容易很多：formFields[fieldId]。

如另一个答案中所述，您可以使用编写可组合的“选择器”来定义如何compute derived state。然后你的组件的代码会很简单，因为所有繁重的工作都是在小型且可组合的选择器中准备数据句柄。

您可以查看 shopping-cart 示例中的化简器和选择器，以更好地了解惯用 Redux 应用程序中的状态结构。请注意，此示例对选择器使用 vanilla 函数，但我们建议使用 Reselect 以获得更好的性能。

【讨论】：