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.