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

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

Answer 2

Adding to @slideshowp2 answer's the extra reducer to purge should match the config used to persist the state. Change customEntitiyAdapter to storage mode specified in the persistConfig, which in this case is storage, change removeAll to remove, and speciify the key from the same persistConfig. If the persistConfig is this

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

change

import { PURGE } from "redux-persist";

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

to

import { PURGE } from "redux-persist";

extraReducers: (builder) => {
  builder.addCase(PURGE, (state) => {
    storage.remove("root");
  });
}