如何在React-Native中注销时删除持久化Reducer

pftdvrlh  于 2023-02-24  发布在  React
关注(0)|答案(2)|浏览(114)

当用户从应用程序注销时,我尝试重置所有内容。但我找不到删除持久配置的方法。
下面是我的实现
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;
b4wnujal

b4wnujal1#

如果您将undefined传递给根缩减器时出现问题,并且这只是对状态进行再水合,则替代方法可能是"覆盖" authReducer身份验证状态,以便这些状态得以持久化。
示例:

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
    });
  },
});
yyhrrdl8

yyhrrdl82#

假设您希望在用户注销时清除所有缓存数据。

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" });
};

相关问题