You know you don’t need Redux for your form state… yet. Requirements change and apps evolve. You can’t always know in advance. What was perfectly fine to store in the local state might need to be moved to Redux.

Oh, and it can be painful to migrate to Redux.

But it can also be smooth… if you do certain things.

Actually, just one

Make small ‘action reducer’ functions. They would take current state and some details about the action, and return the new state.

function changeEmail(state, newEmail) {
  return { ...state, email: newEmail }
}


changeEmail(state, '[email protected]') // => returns state with the new value of email

They can be literally used with the functional form of setState:

handleEmailChange = (evt) => {
  this.setState(state => changeEmail(state, event.target.value);
};

  const newState = fn(this.state);
  this.setState(newState);

Then, to migrate this to Redux, you’d only need to do a few things:

1. Instead of calling setState(state => changeEmail(state, ...)), you would dispatch an action: this.props.onChangeEmail(...);
2. Instead of getting the current values of fields from this.state, you’d use this.props.
3. The changeEmail function trivially becomes a branch in the reducer:

  function loginFormReducer(state, action) {
    switch (action.type) {
      case 'changeEmail': {
        return { ...state, email: action.newEmail };
      }
    }
  }

Going a bit futher

You can go further and create a local “reducer” in your component.

Here’s a general idea:

React.ReducerComponent... 🤔 pic.twitter.com/nMde7ykkc8

— Jared Palmer (@jaredpalmer) September 5, 2017

Since actions are often accompanied by some relevant data (like the new field value), we need something more than string actions ('increment'). We need action objects ({ type: 'something', otherRelevantData: 42 }).

function changeEmail(newEmail) {
  return { type: 'changeEmail', email: newEmail };
}

class Form extends Component {
 // ...
  reduce = action => this.setState(state => this.reducer(state, action));

  reducer = (state, action) => {
    switch (action.type) { // note we're switching by action.type
      case 'changeEmail': return { ...state, email: action.email };
    }
  };

  render() {
    // ...
    <input
      ...
      onChange={evt => this.reduce(changeEmail(evt.target.value))}
    />
  }
}

If it seems really close to Redux, that’s because it is.

It would be trivial to switch from local state to Redux when a form manages its state this way:

• changeEmail would be left without changes, and would be connected by react-redux;
• Instead of having reducer in the class, it would become a Redux reducer;
• Instead of doing this.reduce(changeEmail(...)), you’d do this.props.onChangeEmail(...).