I am using Redux-persist and Redux toolkit to store data in localstorage. Now, when I logout, I am clearing the complete localStorage, but some data are not getting cleared. When I login with completely different user, I am able to see the previous logged in user data for few seconds.

Here is the logout reducer

 logout: state => {
  state.isSignedIn = false;
  state.username = '';
  localStorage.removeItem('persist:root')
  storage.removeItem(SIGNIN_TOKEN);
},

Here is my store.js file.

import { combineReducers } from 'redux'
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import appReducer from './appSlice';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = {
  key: 'DSHP_ROOT',
  version: 1,
  storage
}

const persistedReducer = persistReducer(persistConfig, combineReducers({
  app: appReducer,
}))

export const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
    }
  })
})

export const persistor = persistStore(store)

I tried other solutions suggested in stack overflow which are...

• Setting state to undefined or {} on logout, it is still not working.
• Using root reducer to set state to undefine, not working.
• Tried using persistor.flush() and persistor.purge() not working, can't even login.

The only thing which is working is that, I need to set each and every individual state to its default value which will be difficult since I have so many states and so many reducers (in above code I only added one reducer).

Is there any easy way to clear all state on logout?

Thank you