Search code examples
reactjsreduxredux-form

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?

Solution

    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:

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

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

    3. 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:

    1. React Final Form

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

    1. Formik

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

    1. React Hook Form