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

Kri*_*ris 6 nested normalize reducers redux

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

所以我有一个表格减速器和一个formField减速器.

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

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

这使得reducer变得干净漂亮,但是现在为特定表单检索formFields感觉非常糟糕.我基本上每次循环遍历所有formFields,只返回具有正确"formId"参数的那些.

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

我在这里错过了吗?推荐的解决方法是什么?

Dan*_*mov 4

听起来您将formFields状态保存为数组,但想将其作为对象进行查询formId作为键:

\n\n
\n

这使得减速器变得漂亮和干净,但现在检索特定表单的 formFields 感觉很糟糕。我基本上每次都会循环遍历所有 formField,并且只返回具有正确“formId”参数的那些。

\n
\n\n

如果将formFieldsstate 改为对象,查询起来会容易得多:formFields[fieldId]

\n\n

正如另一个答案中所述,您可以使用编写可组合的 \xe2\x80\x9cselectors\xe2\x80\x9d 来定义如何计算导出状态。那么您的 Components\xe2\x80\x99 代码将会很简单,因为准备数据句柄的所有繁重工作都在小型且可组合的选择器中进行。

\n\n

您可以在购物车中查看减速器和选择器示例中的减速器和选择器,以更好地了解惯用的 Redux 应用程序中状态的结构。请注意,此示例使用普通函数作为选择器,但我们建议使用 Reselect 以获得更好的性能。

\n