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 thehandleChange()
function that will be drawing state inthis.state
. Also feel I will be having lots of flexibility in component stateIf 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 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
Need Help In Deciding
Should I use redux-form store for data modelling
OR
just use for validation
AND
use Component state & custom redux store to model data?