Clear Form in Redux when Navigating with React-Router
Hi there!
I have worked on my project using a React-Redux architecture with React-Router for navigation. I have implemented forms for adding and editing resources. I have observed weird behavior:
- Add new resource with a description: “Hello World!”
- Start editing another resource with a description: “My new comment…”
- Input for description contains a previous value: “Hello World!”
I was expecting to see the current description of the resource: “My new comment…”, not the value from the previous form.
In my case, I was handling the state of the current form by using the same reducer:
// Change form action
export const changeForm = (name, value) => {
let change = {};
change[name] = value;
return {
type: "FORM_CHANGE",
change
}
};
// form reducer
export const form = (state = {}, action) => {
switch (action.type) {
case "FORM_CHANGE":
return {
...state,
...action.change
}
default:
return state;
}
};
I would like to share the solution that worked for me, my dear reader.
Clear State of the Form on Every Navigation
First of all, we need to create a new action “ROUTER.CHANGE” in the routes for handling router change:
export const ROUTER = {
CHANGE: "ROUTER_CHANGE"
};
export const changeRouter = (change) => ({
type: ROUTER.CHANGE,
change
});
Secondly, we should dispatch this action whenever the user navigates somewhere:
hashHistory.listen(change => store.dispatch(changeRouter(change)));
The next step is to add a new case “ROUTER.CHANGE” in the form reducer and clean up the current state, by returning an empty object:
// form reducer
export const form = (state = {}, action) => {
switch (action.type) {
case "FORM_CHANGE": ...
case ROUTER.CHANGE:
return {};
default: ...
}
};
Conclusion
Now the form state clears itself on every navigation. You can find the whole code change here.
Thank you for reading!