How to reset the state of a Redux store?

Question

I am using Redux for state management.
How do I reset the store to its initial state?

For example, let’s say I have two user accounts (u1 and u2).
Imagine the following sequence of events:

1. User u1 logs into the app and does something, so we cache some data in the store.

2. User u1 logs out.

3. User u2 logs into the app without refreshing the browser.

At this point, the cached data will be associated with u1, and I would like to clean it up.

How can I reset the Redux store to its initial state when the first user logs out?

Answer 1

One way to do that would be to write a root reducer in your application.

The root reducer would normally delegate handling the action to the reducer generated by combineReducers(). However, whenever it receives USER_LOGOUT action, it returns the initial state all over again.

For example, if your root reducer looked like this:

const rootReducer = combineReducers({   /* your app’s top-level reducers */ }) 

You can rename it to appReducer and write a new rootReducer delegating to it:

const appReducer = combineReducers({   /* your app’s top-level reducers */ })  const rootReducer = (state, action) => {   return appReducer(state, action) } 

Now we just need to teach the new rootReducer to return the initial state in response to the USER_LOGOUT action. As we know, reducers are supposed to return the initial state when they are called with undefined as the first argument, no matter the action. Let’s use this fact to conditionally strip the accumulated state as we pass it to appReducer:

 const rootReducer = (state, action) => {   if (action.type === 'USER_LOGOUT') {     return appReducer(undefined, action)   }    return appReducer(state, action) } 

Now, whenever USER_LOGOUT fires, all reducers will be initialized anew. They can also return something different than they did initially if they want to because they can check action.type as well.

To reiterate, the full new code looks like this:

const appReducer = combineReducers({   /* your app’s top-level reducers */ })  const rootReducer = (state, action) => {   if (action.type === 'USER_LOGOUT') {     return appReducer(undefined, action)   }    return appReducer(state, action) } 

In case you are using redux-persist, you may also need to clean your storage. Redux-persist keeps a copy of your state in a storage engine, and the state copy will be loaded from there on refresh.

First, you need to import the appropriate storage engine and then, to parse the state before setting it to undefined and clean each storage state key.

const rootReducer = (state, action) => {     if (action.type === SIGNOUT_REQUEST) {         // for all keys defined in your persistConfig(s)         storage.removeItem('persist:root')         // storage.removeItem('persist:otherKey')          return appReducer(undefined, action);     }     return appReducer(state, action); };