persist:root localstorate data is not being cleared on logout

Viewed 990

Reactjs and redux to create application. I've connected reducer data to localStorage persist:root variable. Now trying to remove persist:root on logout but failed. Tried a lot of solutions from web and now code looks like below. But still not working. Please help.

Reducer:

import {applyMiddleware, createStore} from 'redux';
import createSagaMiddleware from 'redux-saga';
import {persistStore, persistReducer} from 'redux-persist';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import storage from 'redux-persist/lib/storage';
import logger from 'redux-logger';
// eslint-disable-next-line import/no-cycle
import rootReducer from '../redux/reducers';
// eslint-disable-next-line import/no-cycle
import rootSaga from '../redux/sagas';

const persistConfig = {
  key: 'root',
  storage,
  stateReconciler: autoMergeLevel2
};

const bindMiddleware = (middleware) => {
  return applyMiddleware(...middleware);
};

const sagaMiddleware = createSagaMiddleware();

export const store = createStore(
  persistReducer(persistConfig, rootReducer),
  bindMiddleware([sagaMiddleware])
);
sagaMiddleware.run(rootSaga);

export const persistor = persistStore(store);

Store:


import { combineReducers } from "redux";
import commonReducer from "./common";
import loginReducer from "./auth/login";
import companyReducer from "./company"
import processReducer from "./process"
import notificationReducer from "./notification"
import recentProgressReducer from "./recentProgress"
import projectManagementReducer from "./projectManagement";
import stepManagementReducer from "./stepManagement";
import memberManagementReducer from "./memberManagement";

const appReducer = combineReducers({
  commonReducer,
  processReducer,
  companyReducer,
  notificationReducer,
  loginReducer,
  recentProgressReducer,
  projectManagementReducer,
  stepManagementReducer,
  memberManagementReducer
});
export default  (state, action) => {
  if (action.type === "SIGNOUT_REQUEST") {
      localStorage.removeItem('persist:root')
      return appReducer(undefined, action);
  }else{
    return appReducer(state, action);
  }
};

This is not working. Please help

1 Answers

persist:root won't be removed since "redux-persist" needs it for retrieval. Don't try to remove it, just make your state empty like you did with appReducer(undefined, action);.

Related