react-redux 持久化

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