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

Question

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 1

I like this answer from one of the Redux co-authors: https://github.com/reactjs/redux/issues/1287

Use React for ephemeral state that doesn't matter to the app globally and doesn't mutate in complex ways. For example, a toggle in some UI element, a form input state. Use Redux for state that matters globally or is mutated in complex ways. For example, cached users, or a post draft.

Sometimes you'll want to move from Redux state to React state (when storing something in Redux gets awkward) or the other way around (when more components need to have access to some state that used to be local).

The rule of thumb is: do whatever is less awkward.

That is, if you're sure that your form won't affect global state or need to be kept after your component is unmounted, then keep in the react state.

Answer 2

1. You can use the component's own state. And then 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 and 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 work for you. And then there is everything in between. There are multiple packages that I've seen that simplify a specific aspect of form management:

3. React Forms - It provides a bunch of helper components to make form rendering and validation more simple.

4. React JSON schema - Allows one to build an HTML form from a JSON schema.

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

Update: seems these days Redux Form is being replaced with:

6. React Final Form

And one more important contender in the space that's worth checking out is:

7. Formik

Tried out React Hook Form in my last project - very simple, small footprint and just works:

8. React Hook Form