javascript - Redux-persist 即使在注销后也会继续存储旧数据

Question

我正在使用 Redux-persist 和 Redux 工具包将数据存储在本地存储中。现在，当我注销时，我正在清除整个 localStorage，但有些数据没有被清除。当我使用完全不同的用户登录时，我可以在几秒钟内看到之前登录的用户数据。

这是注销减速器

 logout: state => {
  state.isSignedIn = false;
  state.username = '';
  localStorage.removeItem('persist:root')
  storage.removeItem(SIGNIN_TOKEN);
},

这是我的 store.js 文件。

import { combineReducers } from 'redux'
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import appReducer from './appSlice';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = {
  key: 'DSHP_ROOT',
  version: 1,
  storage
}

const persistedReducer = persistReducer(persistConfig, combineReducers({
  app: appReducer,
}))

export const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
    }
  })
})

export const persistor = persistStore(store)

我尝试了堆栈溢出中建议的其他解决方案，这些解决方案是......

• 在注销时将状态设置为 undefined 或 {}，它仍然无法正常工作。
• 使用根减速器将状态设置为未定义，不工作。
• 尝试使用 persistor.flush() 和 persistor.purge() 不起作用，甚至无法登录。

唯一有效的是，我需要将每个单独的状态设置为其默认值，这将很困难，因为我有这么多状态和这么多减速器（在上面的代码中，我只添加了一个减速器）。

有什么简单的方法可以清除注销时的所有状态吗？

谢谢

标签： javascriptreactjsredux