Excellent question. You have several options:
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);
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 incomponentWillUnmount
.
this.props.resetForm()
from inside your form after your submission succeeds.
submitMyForm(data) {
const {createRecord, resetForm} = this.props;
return createRecord(data).then(() => {
resetForm();
// do other success stuff
});
}
render() {
const {handleSubmit, submitMyForm} = this.props;
return (
<form onSubmit={handleSubmit(submitMyForm.bind(this))}>
// inputs
</form>
);
}
reset()
from any connected componentExtremely flexible, but you have to know your form name and have
dispatch
available.
import {reset} from 'redux-form';
...
dispatch(reset('myForm')); // requires form name