Redux嵌套reducer或规范化状态？

Question

6

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

因此，我有一个表单reducer和一个formField reducer。

一开始，我按照我的直觉尝试将formField reducer嵌套在form reducer中。这基本上意味着在form reducer和formField reducer中都有与formField相关的switch case，这感觉有点混乱（重复代码）。

因此，我在文档中阅读更多信息后发现，建议对状态进行规范化。因此，我取消了嵌套的formFields，并将它们放在与表单相同的级别上。

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

Redux文档中指出应将状态视为规范化数据库，但他是否忘记了您无法查询结果的奢侈品？

我错过了什么吗？有推荐的方法来解决这个问题吗？

- Kris

1

我认为这是一个有趣的问题/主题，但如果您提供一些示例代码，那将会更容易些。 - tobiasandersen

这更像是一场辩论而不是一个问题，我不确定你能得到明确的行动，但是为了确切理解你所指的内容，提供一些代码会很有帮助。 - Alex Moldovan

2个回答

1

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

还有一个实用工具叫做reselect，它似乎可以解决您的问题。

您只需要编写一个期望formId并返回表单字段数组的选择器即可。

- Sebastien Daniel

1

公平地说，我并没有创建 Reselect。请参阅 CREDITS。 - Dan Abramov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan Abramov · Accepted Answer

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

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

如果将formFields状态更改为对象，则查询将变得更加容易：formFields[fieldId]。

如其他答案中所述，您可以使用编写可组合的“选择器”，定义如何计算派生状态。然后，您的组件代码将变得简单，因为准备数据的所有繁重工作都在小型和可组合的选择器中处理。

您可以查看shopping-cart示例中的reducers和selectors，以更好地了解典型Redux应用程序中的状态结构。请注意，此示例使用普通函数作为选择器，但我们建议使用Reselect以获得更好的性能。