gkkirsch gkkirsch - 9 months ago 42
React JSX Question

I am using Redux. Should I manage controlled input state in the Redux store or use setState at the component level?

I have been trying to figure out the best way to manage my react forms. I have tried to use the onChange to fire an action and update my redux store with my form data. I have also tried creating local state and when my form gets submitted I trigger and action and update the redux store.

How should i manage my controlled input state?

Answer Source
  1. You can use the components own state. And than take that state and give it as an argument to the action. That's pretty much the React way as described in the React Docs.

  2. You can also check out Redux Form. It does basically what you described. It links the form inputs with Redux State.

The first way basically implies that you're doing everything manually - maximum control and maximum boilerplate. The second way means that you're letting the higher order component do all the job for you. And than there is everything in between. There are multiple packages that I've seen that simplify a specific aspect of form management:

  1. React Forms - It provides a bunch of helper components to make forms rendering and validation more simple. Doesn't give you a way

  2. React JSON schema - Simply lets you convert a JSON schema to a form.

  3. Formsy React - As the description says: "This extension to React JS aims to be that "sweet spot" between flexibility and reusability."