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

问题描述

我相信任何应用都应该有一个真实的来源.

我的应用将具有

• 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(){ 将设置数量 &组件状态下的 RATE}const 数量 = this.state.QTY * this.state.RATE

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

4. 如果我的数据模型变得更加复杂，那么在 redux-form 存储中管理将非常困难.那么在这里我想不使用 redux Custom store OR Component state

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

所以我得出的结论是

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

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

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

需要帮助做决定

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

或

仅用于验证

和

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

解决方案

感谢 erikas 提供的漂亮图书馆.差不多两年前出生就一直在用.

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

感到困惑

如果您正在执行数据建模、相关计算，我会建议对数据使用组件状态.

经验法则:

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

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

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

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

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

  • 我也不鼓励你保持沉重、复杂、redux custom store 中的 state 和事务表单 state.就像冰淇淋浇头一样使用它.

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

缺点:我没有找到

结论:redux-form 基本上是给非常新手快速完成工作的，但是当涉及到计算、依赖字段时，商业数据建模，redux-form 不是选项.但即使你很快使用 redux-form 进行数据操作，你最终也会使用 (component state 不可忽略 + redux-form state + redux 自定义状态) 到处乱七八糟.

注意:我喜欢 @vijays 的回答 react-chopper 库，它符合您的所有计算要求.而且比 mobx 和其他库，因为它们弄脏了代码

但是这个 react-chopper 示例非常安静，令人印象深刻

感觉 100% 像 angular.但它的单向流是从内部流出的

免责声明:react-chopper 仍在开发中并且可以仅用于简单到中等的用例.

I believe in any application there should be one source of truth.

---

My app will be having

• 90+ transaction forms and 150 reports
• Complex data structures (parent level, child level, computations)

---

So in React I found three confusing places to store state:

1. Component state - use when we don't want to share data
2. Redux custom store (managed by developer) - use when we want to share data
3. Redux-form store (managed by redux-form) - use for validation

I started using redux form just for validation, and then I got confused when it allowed me to access redux-form store for data as I was already accessing data from Component state AND also from my custom store in redux

1. Redux form does not registers hidden fields. To register hidden fields you have to create a field with disabled attribute, etc.

2. If you do any computation like, AMOUNT = QTY * RATE; Here user will input QTY and RATE And AMOUNT will be computed. Here it will immediately reflect in component state, but not in redux-form state. To make it reflect in redux-form we have to fire.

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

3. It won't be always possible to avoid component state, if I write computation formula code will look like this

   Only Redux-form state

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

   Only react state

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

   Conclusion: If I go with redux-form I will have to write extra code to make redux-store stable in sync, where as state in the React component I will be having the handleChange() function that will be drawing state in this.state. Also feel I will be having lots of flexibility in component state

4. If my data model becomes more complex then it will be very much difficult to manage in redux-form store. Then here I am thinking to not use redux Custom store OR Component state

5. Other libraries that validate React inputs are not using Redux to implement validation. It's just redux-form that is using redux to manage validation.

• Redux-form was born just for validation and not for managing a complex data model.

• Complex data models should be managed in redux custom store OR component state accordingly and not Redux-form

• From the documentation of Redux-form it handles validation very well, but for data modelling purposes it is suggesting solutions that are not 100% straightforward

Should I use redux-form store for data modelling

OR

just use for validation

AND

use Component state & custom redux store to model data?

解决方案

Thanks to erikas for the beautiful library. I have been using since it was born nearly two years ago.

I personally don't use redux-form for data manipulation. I do it by self in component state by onChange setting state. When I came to know data store in redux-form, I initially used it, but as my use cases grew, I have to shift data store to component state. Data modelling in react is something that you need to learn, it won't come by magic. But once you do it you will never get confused about Overrated state management in React

If you are performing Data modelling, dependent computations I will recommend using component state for data.

Thumb Rules:

• Use only one store through the app to store state
• If using Component state then don't use redux-form state (recommended)
• If using redux-form state then don't use Component state (limitation - point 1,2,3 and code dirty magic behind the scene managing store)
• You are right. It was born for validation, so use it for validation.
• Use redux custom store as toggle, user sign-in global data flavor. But not for storing actual transactional form state (limitation -will do over coding).

• If your app is going to be complex I recommend you to use

  • component state - actual form state with onChange

  • redux - use it for global in mngt(toggle,post drafts, users login info only only)

  • redux-from - for validation only and not as data store for submition

  • I also discourage you from keeping heavy, complex, state, and transactional form state in redux custom store. Just use it like ice-cream toppings.

Pros: Component state - Full control over data, flexibility what comes in what goes out, no magic behind the scenes

Cons: I didn't found any

Conclusion: redux-form is basically for very newbies to get things done quickly, but when it comes to computations, dependent fields, commercial data modelling,redux-form is not the option. But even if you do use redux-form for data manipulation soon you will be ending up with using (component state which cannot be ignored + redux-form state + redux custom state) scattered all over with confusion.

Note : I liked @vijays answer react-chopper library below , it fits all your computation requirements.Also its better than 100% better than mobx and other libraries as they dirty the code

But This react-chopper Examples is quiet empressive

It feels 100% like angular.But its uni flow from inside

Disclaimer: react-chopper is still in development And could be used for only simple to medium usecases.

这篇关于我应该使用 redux-form 存储而不是组件状态和 Redux 自定义存储吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！