14

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?

4 Answers 4

11

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

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.

1
  • By "depended fields", you mean "field relationships", yes? I find that pretty simplistic field relationships aren't very hard or particularly convoluted to implement in redux-form and I was doing that for a while now. However, I'd like to ask - do you have any good [open-source or not] examples in min regarding the approaches that you've listed just to explain your vision of state management for complex forms / form-sets? Thanks.
    – Denialos
    Commented Sep 15, 2017 at 5:43
0

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

5
  • Collection ...?
    – vijay
    Commented Sep 12, 2017 at 14:53
  • Redux-Form will store the values in it's own store within Redux. Once you've validated and submitted your form you can do any further processing, manipulating, or persisting as needed
    – ovation22
    Commented Sep 12, 2017 at 14:55
  • So while submitting data you are saying I should collect it from redux form?
    – vijay
    Commented Sep 12, 2017 at 14:57
  • If I collect submitting data from redux-form then I will have to manage point 1, 2 , 3every time and this management cannot happen without taking help i component state.
    – vijay
    Commented Sep 12, 2017 at 15:01
  • If you're performing modeling while collecting data then managing in Redux-Form might not be the best solution. If it's simple calculations you can certainly get the values from the form. If you're performing calculations after collection then you can populate your state after submission. I suppose the best answer I can give is it depends on your usage.
    – ovation22
    Commented Sep 12, 2017 at 15:20
0

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

0

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.

1
  • 1
    Awesome man ,this innovation should be reported to react community
    – Mr punch
    Commented Jul 18, 2018 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.