Umijs项目使用dva配合redux-persist做持久化处理

教程

发布日期: 2023-07-20

更新日期: 2023-07-20

文章字数: 279

阅读时长: 1 分

阅读次数:

为什么要做数据持久化

在项目中有的数据需要从后端获取同时这个数据又是全局使用的，不能因为一刷新就重新从后端获取。这样不现实，所以就可以使用到数据持久化并且使用dva配合redux-persist实现的数据持久化改动的代码特别少，可以说是几乎没有。

教程项目各依赖版本

"react": "17.x",
"react-dom": "17.x",
"redux-persist": "^6.0.0",
"umi": "^3.5.35",

安装 redux-persist

在 umijs 项目中开启 dva 数据状态管理后，可以通过 npm 的方式来安装 redux-persist

npm i redux-persist

更改 Umijs 的配置

在在 src/app.js文件中添加以下配置

import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["enumerate"], // 配置白名单 里面写需要配置的名字 也就是dva文件的namespace
};
// 数据持久化
const persistEnhancer =
  () => (createStore) => (reducer, initialState, enhancer) => {
    const store = createStore(
      persistReducer(persistConfig, reducer),
      initialState,
      enhancer
    );
    const persist = persistStore(store);
    return { ...store, persist };
  };

export const dva = {
  config: {
    extraEnhancers: [persistEnhancer()],
  },
};