我应该使用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的文档中可以很好地处理验证,但是出于数据建模的目的,它建议的解决方案不是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％，因为它们弄脏了代码

但是这个reactor-chopper的例子令人印象深刻

感觉像是100％像是角形，但它从内部均匀流动

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