Redux嵌套的reducers或规范化状态？

Question

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

所以我有一个表单缩减器和一个formField reducer。

我首先遵循我的直觉，并尝试将formField减速器嵌套在减速器中。这基本上意味着在form reducer和formField reducer中都有与formField相关的开关案例。

这感觉有点乱（重复代码），所以我在文档中阅读了更多内容，并发现建议将状态标准化。所以我拿走了嵌套的formFields并将它们放在与表单相同的级别。

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

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

我在这里错过了什么吗？建议的解决方法是什么？

Answer 1

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

  

这使得reducer变得干净整洁，但是现在为特定表单检索formFields感觉非常糟糕。我基本上每次循环遍历所有的formFields，只返回那些带有正确的＆＃34; formId＆＃34;参数。

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

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

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

Answer 2

据我所知，您的问题是查询派生数据。 （即属于X形式的字段）。

还有一个名为reselect的实用工具，您的用例似乎与其解决的内容相符。

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