how to reset redux store when log out?

Question

I am trying to reset my storage when I log out but it doesn't seem to work at all.

As you can see I am using AsyncStorage for my store and I try to follow the answer from this post.

Here is my index.js from store folder

import thunk from 'redux-thunk';
import { createStore, compose, applyMiddleware } from 'redux';
import { AsyncStorage } from 'react-native';
import { persistStore, autoRehydrate } from 'redux-persist';
import rootReducer from '../reducers';

var defaultState = {};

export function configureStore(initialState = defaultState) {
  var store = createStore(rootReducer, initialState, compose(
    applyMiddleware(thunk),
    autoRehydrate(),
  ));
  persistStore(store, { storage: AsyncStorage });
  return store;
}

and here is my index.js from reducers folder

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import { AsyncStorage } from 'react-native';

import authReducer from './authReducer';
import alertsReducer from './alertsReducer';
import jobsReducer from './jobsReducer';
import userDataReducer from './userDataReducer';

const appReducer = combineReducers({
  form: formReducer,
  auth: authReducer,
  alerts: alertsReducer,
  jobs: jobsReducer,
  userData: userDataReducer
})

const rootReducer = ( state, action ) => {
  if(action.type === 'UNAUTH_USER') {
    Object.keys(state).forEach(key => {
      AsyncStorage.removeItem(`persist:${key}`);
      console.log(state)
    });
  }
  return appReducer(state, action)
}

export default rootReducer

Mukundhan · Answer 1 · 2019-06-27T11:33:37.643

On Initial load of our application the reducer state is fresh.

We Can copy this initial default state and use it to assign to our reducer again on logging out, the way we can achieve this could be as follows.

Step 1: call an action on the application load that will copy reducer's initial state as the defaultState

Step 2: While logging out of the application we can simply reAssign the default state and it should work as new.

App root Component

  componentDidMount() {   
    dispatch(ON_APP_LOAD)
  }

App Reducer

const appReducer = combineReducers({
  user: userStatusReducer,     
  analysis: analysisReducer,
  incentives: incentivesReducer
});

let defaultState = null;
export default (state, action) => {
  switch (action.type) {
    case **ON_APP_LOAD**:
      // will be assigned or called only once 
      defaultState = defaultState || state;
      break;
    case **RESET_STATE**:
      // detaching the reference on reset
      state = _.deepClone(defaultState);
      return state;
    default:
      break;
  }
  return appReducer(state, action);
};

On Logout calling the action for resetting state

function* logoutUser(action) {
  // on logout success 
  dispatch("RESET_STATE")
}

score 0 · Answer 2 · answered Dec 02 '20 at 19:18

I assume you have the js file where all reducers are combined in one and thus you have:

const allReducers = combineReducers({
   reducer: nameOfReducer
});

const rootReducer = (state, action) => {

    switch (action.type) {
        case  CLEAR_ALL_REDUCERS_DATA:
            return state = undefined;
        default:
            return allReducers(state, action)
    }
};

export default rootReducer;

and in index file where you create a store you need to define

const store = createStore(rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

and then simply call it on logout:

dispatch(clearAllStoreData());

where clearAllStoreData is an action defined in your action file:

export const clearAllStoreData = () => {
    return {
        type: CLEAR_ALL_REDUCERS_DATA
    }
};

how to reset redux store when log out?

2 Answers2