Should I use redux-form store instead of component state and Redux custom store?

问题

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:

Component state - use when we don't want to share data
Redux custom store (managed by developer) - use when we want to share data
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

Redux form does not registers hidden fields. To register hidden fields you have to create a field with disabled attribute, etc.
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))
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
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
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.

So I reached the conclusion that

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
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

Need Help In Deciding

Should I use redux-form store for data modelling

just use for validation

AND

use Component state & custom redux store to model data?

回答1:

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.

回答2:

I would recommend using Redux-Form only for collection and validation of data. Utilize your own component state and/or custom redux store if and when appropriate.

You're correct in only using redux for state that is to be shared. Keep things simple and reusable.

Good reading:

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

回答3:

If you don't need to execute async tasks i.e async form validations then it's easy to create a custom form generator component instead of using redux-form which is much complex, adds an extra layer of boilerplate & force you to use redux. For ref. check it. https://github.com/bietkul/react-native-form-builder