How to purge any persisted state using react tool kit with redux-persist

Question

In the official documentation it says to add an extra reducer in order to purge the state of the current slice, however there is no a clear example everywhere

import { PURGE } from "redux-persist";

extraReducers: (builder) => {
  builder.addCase(PURGE, (state) => {
    customEntityAdapter.removeAll(state);
  });
}

How to import or where did it get customEntityAdapter, when I call the persistorObject then purge it shows error, anybody can give me some light on this, thanks I appreciate clear example with redux-toolkit with https://redux-toolkit.js.org/usage/usage-guide#use-with-redux-persist

Answer 1

As Radu Lunasu said, this is the correct code:

extraReducers: (builder) => {
  builder.addCase(PURGE, () => {
    return initialState;
  });
},

Then you can use persistor.purge() in any component, for exaple:

const handleLogout = () => {
    persistor.purge();
    navigate("/login");
};

I don't have the reputation to upvote your answer. Sorry, but +1

Answer 2

customEntityAdapter, according to its name, it should be created by createEntityAdapter.

A function that generates a set of prebuilt reducers and selectors for performing CRUD operations

Whether it is used or not has nothing to do with using redux-persist. Since your question is about how to use RTK and redux-persist, and its purge state function, in order to simplify the problem, I will not use createEntityAdapter.

An example about how to use RTK with redux-persist and .purge() method on persistor.

App.tsx:

import "./styles.css";
import { persistor } from "./store";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button
        onClick={() => {
          persistor.purge();
        }}
      >
        purge state
      </button>
    </div>
  );
}

reducers.ts:

import { combineReducers } from "@reduxjs/toolkit";

const rootReducer = combineReducers({
  user: (state = { name: "teresa teng" }, action) => state
});

export default rootReducer;

store.ts:

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

import rootReducer from "./reducers";

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

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

let persistor = persistStore(store);

export { store, persistor };

index.tsx:

import { render } from "react-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

import { store, persistor } from "./store";

import App from "./App";

const rootElement = document.getElementById("root");
render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  rootElement
);

The state persisted in the default storage engine - localStorage:

You can click the button, purge the state from localStorage.

codesandbox