How to reset the state of a Redux store?

javascript

redux-toolkit

redux-persist

async-action-handling

byNikita Barsukov·Jan 12, 2025

To reset your Redux store, dispatch a specific RESET action. Handle this in your reducers to return to initial state:

// Action Creator
const resetStore = () => ({ type: 'RESET' });

// Root Reducer
const rootReducer = (state, action) => {
  return action.type === 'RESET' ? undefined : state;
};

// Reset command
store.dispatch(resetStore());

Delegate to appReducer

Implement a rootReducer which really is an appReducer handling the flow of resetting for you:

const initialState = {};

const appReducer = combineReducers({
  // Cascade your reducers here like waterfalls in nature
  // auth: authReducer,
  // profile: profileReducer,
});

const rootReducer = (state, action) => {
  if (action.type === 'RESET') {  
    state = undefined; // Thanos snap; state becomes undefined
  }
  return appReducer(state, action); // Avengers assemble! Put state back together.
};

The rootReducer sets the state to undefined when a RESET action is dispatched and delegates to appReducer. This triggers individual reducers to reset to their initial state.

Persistent state reset with redux-persist

For a persistent Redux state across page reloads, redux-persist comes to the rescue:

import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // Rockstar entrance defaults to localStorage for web

const persistConfig = {
  key: 'root',
  storage,
  // other configurations...
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);

// Resetting the store, code-name: Operation Cleanup
const resetAndCleanStore = async () => {
  await persistor.purge();
  store.dispatch(resetStore());
};

Invoking resetAndCleanStore will cleanse your persistent store and reset the state upon user logout.

Taming specific reducers

Don't want a complete reset? Handle the RESET action in specific reducers:

const authReducer = (state = initialAuthState, action) => {
  if (action.type === 'RESET') {
    return initialAuthState; // Behave like a goldfish 🐠
  }
  // handle other actions
};

Async action handling for logout

For asynchronous operations, consider using middleware such as Redux-Saga or Redux-Thunk along with your RESET handling. Here's how it works with Redux-Thunk:

const userLogout = () => (dispatch) => {
  // Perform logout operations (maybe cry a little)
  dispatch({
    type: 'USER_LOGOUT',
  });
  dispatch(resetStore()); // Have a reset after the tears dry.
};

With middleware, the reset process is decoupled from user actions and can handle async cleanup logic.

Supercharge with Redux Toolkit

Redux Toolkit (RTK), especially with TypeScript, enhances store setup and state resets. Take a look:

import { createAction, createReducer } from '@reduxjs/toolkit';

// Action
const resetState = createAction('resetState');

// Reducer
const reducer = createReducer(initialState, (builder) => {
  builder.addCase(resetState, () => initialState);
  // other handlers...
});