How can I clear my form after my submission succeeds? #

Excellent question. You have several options:

A) You can use the plugin() API to teach the redux-form reducer to respond to the action dispatched when your submission succeeds. #

This is the proper Redux way to do it and has the benefit of not dispatching another action.


import {createStore, combineReducers} from 'redux';
import {reducer as formReducer} from 'redux-form';
import {ACCOUNT_SAVE_SUCCESS} from '../actions/actionTypes';

const reducers = {
  // ... your other reducers here ...
  form: formReducer.plugin({
    account: (state, action) => { // <------ 'account' is name of form given to reduxForm()
      switch(action.type) {
        case ACCOUNT_SAVE_SUCCESS:
          return undefined;       // <--- blow away form data
        default:
          return state;
      }
    }
  })
}
const reducer = combineReducers(reducers);
const store = createStore(reducer);

B) Simply unmount your form component #

For many use cases, you will want to either hide your form component after submission succeeds or navigate away to another page, which will cause redux-form's default behavior of destroying the form data in the reducer in componentWillUnmount.

C) You can call this.props.reset() from inside your form after your submission succeeds. #


submitMyForm(data) {
  const { createRecord, reset } = this.props;
  return createRecord(data).then(() => {
    reset();
    // do other success stuff
  });
}

render() {
  const { handleSubmit } = this.props;
  return (
    <form onSubmit={handleSubmit(this.submitMyForm.bind(this))}>
      // inputs
    </form>
  );
}

D) You can dispatch reset() from any connected component #

Extremely flexible, but you have to know your form name and have dispatch available.


import {reset} from 'redux-form';

...

dispatch(reset('myForm'));  // requires form name