redux持久化缓存redux-persist

项目中依赖版本

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

默认玩法

tsx 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后

```tsx 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 ; export type AppDispatch = typeof store.dispatch;

export default store; ```