I'm using redux-persist in my react app. On logout, I want to completely reset the redux state and remove all local storage data.
This is my logout action, in which I delete the refresh token from the backend and then call purge on the redux store persistor before dispatching a RESET.
export const logout = () => (dispatch) => {
if (localStorage.refreshToken) {
axios.post(`${API_URL}/logout`, {token: localStorage.refreshToken}).then( async () => {
// rest redux-persist
await persistor.purge();
dispatch({ type: RESET });
});
}
}
In my root reducer, I followed this answer here to handle this RESET action:
const appReducer = combineReducers({
/* app level reducers...*/
});
const rootReducer = (state, action) => {
console.log("Reducing action: ", action);
if (action.type === RESET) {
// reset state
state = undefined;
// reset local storage
localStorage.clear();
}
return appReducer(state, action)
}
export default rootReducer;
I can see that my tokens are cleared from local storage and also that the last triggered action is indeed the RESET action. But still the local storage contains the persist:root
from redux-persist. Does anybody know why it isn't removed or how I can achieve what I'm trying to do?