How to delete persist Reducer on logout in React-Native

Question

I am trying to reset everything when the user logout from the app. But I can't find a way to delete my persist configs.

Here is my implementation

reducers

import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import createSensitiveStorage from 'redux-persist-sensitive-storage';

import appReducer from '../app';
import authReducer from '../auth';
import notificationsReducer from '../notifications';
import businessReducer from '../businesses';
import pendingPostReducer from '../pendingPost';
import postsReducer from '../posts';
import otherUsersReducer from '../otherUsers';
import searchHistoryReducer from '../searchHistory';
import rentRequestReducer from '../rentRequests';
import visitRequestsReducer from '../visitRequests';
import commonReducer from '../common';
import conversations from '../conversations';
import messages from '../messages';
import reviews from '../reviews';
const sensitiveStorage = createSensitiveStorage({
  keychainService: 'myKeychain',
  sharedPreferencesName: 'mySharedPrefs',
});

const appPersistConfig = {
  key: 'app',
  storage: AsyncStorage,
};

const authPersistConfig = {
  key: 'auth',
  storage: sensitiveStorage,
};

const searchHistoryPersistConfig = {
  key: 'searchHistory',
  storage: AsyncStorage,
};

const combinedReducer = combineReducers({
  app: persistReducer(appPersistConfig, appReducer),
  auth: persistReducer(authPersistConfig, authReducer),
  searchHistory: persistReducer(
    searchHistoryPersistConfig,
    searchHistoryReducer
  ),
  otherUsers: otherUsersReducer,
  notifications: notificationsReducer,
  business: businessReducer,
  pendingPost: pendingPostReducer,
  rentRequests: rentRequestReducer,
  posts: postsReducer,
  visitRequests: visitRequestsReducer,
  common: commonReducer,
  conversations: conversations,
  messages: messages,
  reviews: reviews,
});

const rootReducer = (state, action) => {
  if (action.type === 'auth/logout/fulfilled') {
    return combinedReducer(undefined, action);
  }
  return combinedReducer(state, action);
};

export default rootReducer;

store

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import { composeWithDevTools } from 'remote-redux-devtools';
import { persistStore } from 'redux-persist';

import rootReducer from './reducers';

const loggerMiddleware = createLogger({
  predicate: (getstate, actions) => __DEV__,
});

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk, loggerMiddleware))
);

export let persistedStore = persistStore(store);
export default store;

Did you have a look on some answers [here](https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store)? — Hamza Mushtaq, Feb 23 '23 at 09:55
yes I tried this exact approach but having trouble my current storage implementation — warCommander, Feb 23 '23 at 11:59

score 0 · Answer 1 · answered Feb 23 '23 at 08:54

0

If the issue that you are passing undefined to the root reducer and this is just rehydrating the state then an alternative may be to "overwrite" the authReducer auth state so these are persisted.

Example:

const logout = createAsyncThunk(
  "auth/logout",
  async () => { .... },
);

const initialState = {
  ....
};

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    ....
  },
  extraReducers: builder => {
    builder.addCase(logout.fulfilled, (state, action) => {
      ... overwrite/nullify/etc auth state properties ...
      ... or return initialState
    });
  },
});

answered Feb 23 '23 at 08:54

Drew Reese

165,259
14
153
181

I have many reducers, I don't want to reset everyone manually in each slice – warCommander Feb 23 '23 at 11:59
@warCommander How much other state are you trying to blow away here? You only persist 3 areas of state from what I can tell. – Drew Reese Feb 23 '23 at 18:25
@warCommander FWIW In several apps I've developed we had to conditionally delete specific parts of state in response to specific actions. For example, logging a guest out we delete their auth state but keep all the normal app data, if trying to "reset the app" we keep the auth state but remove everything else so the user remains logged in but the app effectively is reset. Does this make sense? – Drew Reese Feb 23 '23 at 18:43

score 0 · Answer 2 · answered Feb 23 '23 at 14:17

Assume that you want to purge all cached data when user logged out.


const rootReducer = (state, action) => {
  if (action.type === "app/purgeStore") {
    // Clean-up redux-persist's storage engine
    AsyncStorage.removeItem("persist:root");

    state = {};
  }

  return reducer(state, action);
};

// Later in UI screen/hooks
const logout = () => {
  // Logout user logic here ....
  //...

  // Finally purge all your persisted data
  dispatch({ type: "app/purgeStore" });
};

This works for the redux persist, but I have `redux-persist-sensitive-storage` for my auth Reducer. it will not reset it — warCommander, Feb 25 '23 at 07:11

How to delete persist Reducer on logout in React-Native

2 Answers2