1. 安装 redux-persist
npm install redux-persist
2.store/index.js文件
import { configureStore,combineReducers } from "@reduxjs/toolkit"; import { persistStore, persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import counterReducer from './modules/counterStore' import userReducer from './modules/userStore' // 配置持久化 const persistConfig = { key: 'root', storage, }; var all = combineReducers({ counter: counterReducer, user: userReducer }) // 获取持久化配置项 function getPersistConfig(key){ return { key, storage, } } const store = configureStore({ reducer:persistReducer(persistConfig,all), middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }) }) // 导出 persistor 对象以帮助持久化 export const persistor = persistStore(store); export default store
3.入口index.js文件注入
import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import store , { persistor }from './store' root.render( <React.StrictMode> <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <RouterProvider router={router}></RouterProvider> </PersistGate> </Provider> </React.StrictMode> );
标签:持久,storage,react,persist,import,redux,store From: https://www.cnblogs.com/jlyuan/p/18124423