nested - Redux 嵌套 reducer 或规范化状态？

Question

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

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

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

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

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

Redux 文档指出您应该将状态视为规范化的数据库，但他难道没有忘记您没有能够查询结果的奢侈吗？

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

Answer 1

听起来你还保留着 formFields状态为数组但想将其作为对象查询 formId是关键:

This made the reducer nice and clean, but now retrieving the formFields for a specific form feels horrible. I'm basically looping through all the formFields every time and only returning those with the correct "formId" parameter.

如果您更改 formFields state 是一个对象，查询起来会容易很多: formFields[fieldId] .

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

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