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

Question

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.

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?

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

Answer 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

Answer 3

If you don't need to execute async tasks ie 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

Answer 4

After nearly seven frustrating months

I created a new library, React-chopper .

A revolutionary two-way binding in React that will meet any business object complexity, almost like AngularJS.

Enjoy! Code like AngularJS in React.