Close
- Redux Form
- FAQ
- How can I clear my form after my submission succeeds?
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 incomponentWillUnmount
.
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