我应该使用 redux-form 存储而不是组件状态和 Redux 自定义存储吗？

Question

我相信在任何应用程序中都应该有一个事实来源。

---

我的应用程序将有

• 90 多种交易表格和 150 份报告
• 复杂的数据结构（父级、子级、计算）

---

所以在 React 中，我发现了三个令人困惑的地方来存储状态：

1. 组件状态-使用的时候，我们不希望共享数据
2. Redux 自定义存储（由开发者管理） ——当我们想要共享数据时使用
3. Redux-form 存储（由 redux-form 管理） - 用于验证

我开始仅使用 redux 表单进行验证，然后当它允许我访问 redux-form 存储以获取数据时我感到困惑，因为我已经从组件状态访问数据，也从我在 redux 中的自定义存储访问数据

1. Redux 表单不注册隐藏字段。 要注册隐藏字段，您必须创建一个具有禁用属性的字段等。

2. 如果您进行任何计算，例如，AMOUNT = QTY * RATE; 这里用户将输入 QTY 和 RATE 并且将计算 AMOUNT。 在这里它会立即反映在组件状态中，但不会反映在 redux-form 状态中。 为了让它以 redux 形式反映，我们必须开火。

   this.props.dispatch(change('Invoice', 'amount', 55))

3. 并非总是可以避免组件状态，如果我编写计算公式代码将如下所示

   只有 Redux 形式的状态

   const amount = someReduxFormApiGet(QTY) + someReduxFormApiGet(RATE) this.props.dispatch(change('Invoice', 'amount', 55))

   仅反应状态

   onChange(){ will have set QTY & RATE in component state} const amount = this.state.QTY * this.state.RATE

   结论：如果我使用redux-form我将不得不编写额外的代码来使 redux-store 保持同步稳定，作为 React 组件中的状态，我将使用handleChange()函数在this.state绘制状态. 也觉得我将在组件状态中有很大的灵活性

4. 如果我的数据模型变得更加复杂，那么在 redux-form 存储中管理将非常困难。 然后在这里我想不使用redux 自定义存储或组件状态

5. 其他验证 React 输入的库没有使用 Redux 来实现验证。 它只是使用 redux 来管理验证的 redux-form。

所以我得出的结论是

• Redux-form 的诞生只是为了验证，而不是为了管理复杂的数据模型。

• 复杂的数据模型应该在 redux 自定义存储或组件状态中进行管理，而不是 Redux-form

• 从 Redux-form 的文档来看，它可以很好地处理验证，但出于数据建模的目的，它建议的解决方案并非 100% 直接

需要帮助做决定

我应该使用 redux-form 存储进行数据建模吗

或

仅用于验证

和

使用组件状态和自定义 redux 存储来建模数据？

Answer 1

感谢erikas提供美丽的图书馆。 自从它在近两年前出生以来，我一直在使用。

我个人不使用 redux-form 进行数据操作。 我通过 onChange 设置状态在组件状态下自行完成。 当我开始了解 redux 形式的数据存储时，我最初使用它，但随着我的用例增长，我必须将数据存储转换为组件状态。 React 中的数据建模是您需要学习的东西，它不会凭空而来。 但是一旦你这样做了，你就永远不会Overrated state management in React感到困惑

如果您正在执行Data modelling, dependent computations我将建议对数据使用组件状态。

拇指规则：

• 通过应用程序仅使用一个商店来存储状态
• 如果使用Component state则不要使用redux-form状态（推荐）
• 如果使用redux-form state则不要使用Component state （限制 - 点 1,2,3 和场景管理商店背后的代码脏魔术）
• 你是对的。 它为验证而生，所以用它来验证。
• 使用redux custom store作为toggle, user sign-in global data风格。 但不是用于存储实际的事务表单状态（限制 - 会过度编码）。

• 如果您的应用程序会很复杂，我建议您使用

  • component状态 - 带有 onChange 的实际表单状态

  • redux - 在 mngt 中将其用于全局（切换、发布草稿、仅用户登录信息）

  • redux-from - 仅用于验证而不是作为提交的数据存储

  • 我也不鼓励你在redux custom store保持繁重、复杂、状态和事务表单状态。 就像冰淇淋浇头一样使用它。

优点：组件状态 - 对数据的完全控制，进出的灵活性，幕后没有魔法

缺点：我没有找到

结论： redux-form基本上是让very newbies快速完成工作的，但是当涉及到计算、依赖字段、商业数据建模时， redux-form不是选项。 但是，即使您很快就使用redux-form进行数据操作，您最终也会使用（不可忽略的component state + redux-form state + redux custom state ）散布在各处，混乱不堪。

注意：我喜欢下面的@vijays 回答react-chopper库，它符合您的所有计算要求。此外，它比mobx和其他库好 100%，因为它们弄脏了代码

但是这个 react-chopper 的例子是安静的令人印象深刻

感觉 100% 像 angular。但它的单流从内部

免责声明： react-chopper仍在开发中，只能用于简单到中等的用例。

Answer 2

我建议仅将 Redux-Form 用于数据的收集和验证。 在适当的时候使用您自己的组件状态和/或自定义 redux 存储。

您仅将 redux 用于要共享的状态是正确的。 保持简单和可重用。

好读：

https://goshakkk.name/should-i-put-form-state-into-redux/

https://hackernoon.com/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6

https://medium.com/dailyjs/why-build-your-forms-with-redux-form-b​​cacbedc9e8

Answer 3

如果您不需要执行异步任务，即异步表单验证，那么创建自定义表单生成器组件很容易，而不是使用复杂得多的 redux-form，添加额外的样板层并强制您使用 redux。 对于参考。 检查它。 https://github.com/bietkul/react-native-form-b​​uilder

Answer 4

在令人沮丧的近七个月之后

我创建了一个新库React-chopper 。

React 中革命性的双向绑定，可以满足任何业务对象的复杂性，几乎就像 AngularJS。

享受！ 像 React 中的 AngularJS 一样的代码。