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

Question

我相信任何应用都应该有一个真理来源。

我的应用将有

• 90多个交易表格和150个报告
• 复杂数据结构（父级别，子级别，计算）

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

1. 组件状态 - 当我们不想要共享数据时使用
2. Redux custom store (managed by developer) - 在我们想要共享数据时使用
3. Redux-form store (managed by redux-form) - 用于验证

我开始使用redux表单仅用于验证，然后当我允许我访问数据的redux-form存储时，我得到了 confused ，因为我已经从组件状态AND也来自我在redux

中的自定义商店

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

2. If you do any computation like，AMOUNT = QTY * RATE;这里用户将输入QTY和RATE并且将计算AMOUNT。在这里，它将立即反映在组件状态，但不是在redux-form状态。为了使它以redux形式反映，我们必须开火。

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

3. 如果我写的计算公式代码看起来像这样，那么它总是不可能避免组件状态

   仅Redux-form状态

   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的文档中，它可以很好地处理验证，但是出于数据建模的目的，它建议的解决方案不是100％直截了当

  

需要帮助决定

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

OR

仅用于验证

和

使用组件状态＆amp;自定义redux存储到模型数据？

Answer 1

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

我个人不使用redux-form进行数据操作。我通过onChange设置状态在组件状态中自行完成。当我以redux形式了解数据存储时，我最初使用它，但随着我的用例增长，我必须将数据存储转移到组件状态。反应中的数据建模是您需要学习的东西，它不会通过魔法来实现。但是一旦你这样做，你永远不会对 Overrated state management in React

感到困惑

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

Thumb Rules：

• 通过应用程序仅使用一个商店来存储状态
• 如果使用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 - 仅用于验证，而不是作为submition的数据存储

  • I also discourage you from keeping heavy, complex, state, and transactional form state in redux custom store。只需像冰淇淋配料一样使用它。

专业人士：组件状态 - 完全控制数据，灵活处理的内容，幕后没有魔力

缺点：我没找到任何

结论：redux-form基本上是very newbies来快速完成工作，但涉及到计算，依赖字段，商业数据建模，redux-form不是选择。但是，即使您很快使用redux-form进行数据处理，最终也会使用（component state无法忽略的redux-form state + redux custom state）

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

But This react-chopper Examples is quiet empressive

它感觉100％像angular.But它的内部流动

免责声明：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-bcacbedc9e8

Answer 3

如果您不需要执行异步任务，即异步表单验证，则可以轻松创建自定义表单生成器组件，而不是使用非常复杂的redux-form，添加额外的样板和文件层。强迫你使用redux。  对于参考核实。 https://github.com/bietkul/react-native-form-builder

Answer 4

经过近七个令人沮丧的月份

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

React中的革命性双向绑定将满足任何业务对象的复杂性，几乎与AngularJS一样。

享受！像React中的AngularJS代码。