Should you store your form state in Redux?

21 Nov 2016

Should you store your form state in Redux?

You are using controlled input components to make your forms. Because your form has to provide immediate feedback, because you need the UX to be top-notch.

You are using Redux to manage your app’s state: things like current user and their data and so on.

At this point, you look at these two things and are kind of wondering:

Should I put this form’s state into Redux? Should I have all form state in Redux?

Well, should you?

React state vs. Redux state

As Dan Abramov put it:

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.

The simplified version of the quote is: use React state for things that don’t matter globally, and use Redux for state that does matter.

He has a point. He did put form input state into the ephemeral category, but that’s not always the case, and I’ll show why.

Applied to forms

That’s… good and all. What does it mean in practice, applied to forms?

Here are several reasons you might want to move that state into Redux:

On another hand, here are the broad reasons to keep the state in a React container:

In short, if the form state does not matter globally, it’s more than fine to keep it in the local state.

A sensible default

Most of my forms start out with React state only. And it’s a great default, because nearly not every form needs to implement all those cases when Redux is needed.

However, when the UX person comes and asks for something you can’t have with React state alone, you have to be ready.

In general, structuring your React state and components according to the container/presentational component pattern would make such a React state → Redux transition very easy.

Not All-or-Nothing

Even if you decide you do need to go down the Redux route, don’t trap yourself into thinking you now have to move every single bit of your container state into Redux.

In fact, this is rarely the case. Instead, identify the state that:

And once you have, make that into Redux state.

For example, if the goal is to persist the input values as in the login modal example, only login and password would go into the state. The piece of state that knows whether a certain input would still stay in the container component, because it’s not needed anywhere else.

No clear-cut answers

Ultimately, there is no “right” or “wrong” answer in the abstract.

There may well be ways to make Clippy cover its eyes without Redux.

There may well be reasons to use Redux even for a one-off form. For example, if time-travel debugging is how you debug every single bug.

Every particular case is different and should be evaluated separately, taking into account:

And there’s no better person than you to make that call. You don’t need to be compatible with every Medium article out there. Different requirements = different solutions.

BTW. If you want to learn more about handling forms with React, be sure to sign up for my newsletter.

Think your friends would dig this article, too?

If you need a mobile app built for your business or your idea, there's a chance I could help you with that.
Leave your email here and I will get back to you shortly.