Unable to clear initial state data from chrome for redux

Question

store.ts

import { combineReducers, configureStore } from "@reduxjs/toolkit"
import { 
    persistReducer, 
    persistStore,
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER 
} from "redux-persist";
import storage from "redux-persist/lib/storage"
import userReducer from "./features/userSlice";

const persistConfig = {
    key: "root",
    version: 1,
    storage
}

const rootReducer = combineReducers({
    user: userReducer
})

const persistedReducer = persistReducer(persistConfig, rootReducer)

export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== "production",
    middleware: (getDefaultMiddleware) => 
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
            }
        }) 
})

export const persistor = persistStore(store)

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

main.tsx

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <App />
        </PersistGate> 
      </Provider> 
    </QueryClientProvider> 
  </BrowserRouter>,
)

slices/userSlice.ts

import { TLoginUser } from "../../types"
import { PayloadAction, createSlice } from "@reduxjs/toolkit"

type TInitialState = {
    user: TLoginUser | null 
}

const initialState: TInitialState = {
    user: null 
}

export const userSlice = createSlice({
    name: "user",
    initialState,
    reducers: {
        login: (state, action: PayloadAction<TLoginUser>) => {
            state.user = action.payload
        },
        logout: (state) => {
            state.user = null 
        },
        reset: (state) => {
            state.user = null
        }
    }
})

export const { login, logout, reset } = userSlice.actions

export default userSlice.reducer 

types/index.ts

export type TLoginUser = {
    user: {
        userId: string 
        role: string 
    } 
    orders: string[]
    basketItems: string[]
    refreshToken: string 
    accessToken: string 
}

When I re-run the application and try to reset the redux state, whenever I refresh the page, the initial state data could not be cleared and the state data is from other projects that are incorrect. The picture is showing currentUser property that I do not expect it exists as I didn't define its property in the project. May I ask how to have the data cleared when trying to reset the state data?

Answer 1

This sounds like you just need to blow away the previous "bad state" value that was persisted that is hydrated into your current app's store when the page reloads.

Open the Chrome dev tools and navigate to the "Application" tab, select your app from "Local storage" under the Storage section, and delete the "persist:root" key that you find there and reload the page before the app has a chance to re-persist the current "bad state".

Ideally only one React app runs per URL, e.g. where each URL gets its own localStorage, but if you are running multiple projects on the same URL with the same persistence key then you might run into issues where each app is just overwriting the same "persist:root" localStorage key. If this is the case then give your app a more unique key.

Example:

const persistConfig = {
  key: "my-unique-app-root",
  version: 1,
  storage
}