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