redux持久化缓存redux-persist

在使用redux的时候，总有一些信息是需要持久化缓存的，比方说用户的token和一些角色，菜单之类的，redux-persist是最契合的一种。实战中也用了2个项目，记录下基本的玩法。

项目中依赖版本

"react-redux": "^8.0.5",
"@reduxjs/toolkit": "^1.9.1",
"redux-persist": "^6.0.0",

默认玩法

import { configureStore } from '@reduxjs/toolkit'
import { userSlice } from './slices/user';
import { fuseImSlice } from './slices/fuseIm';
const store = configureStore({
    reducer: {
        user: userSlice.reducer,
        fuseIm: fuseImSlice.reducer,
    },
    devTools: true, // 自己根据环境配置
});
//定义 ts types
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;

加入redux-persist后

import { configureStore } from '@reduxjs/toolkit'
import { combineReducers } from 'redux'

import { userSlice } from './slices/user';
import { fuseImSlice } from './slices/fuseIm';
/* 持久化缓存 */
import { persistReducer, persistStore } from 'redux-persist'
import storage from 'redux-persist/es/storage'

// 缓存数据配置
const persistConfig = {
  key: 'root', // LocalStorage中显示为persist:root: {};
  storage,
  blacklist: ['fuseIm'] // 写在这块的数据不会存在storage
}
const reducers = combineReducers({
  user: userSlice.reducer, //user module
  fuseIm: fuseImSlice.reducer,
})
const persistedReducer = persistReducer(persistConfig, reducers)
const store = configureStore({
  reducer: persistedReducer,
    middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
    serializableCheck: false,
  }),
})
// 记得包裹
export const persist = persistStore(store);
//定义 ts types
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;