redux-persist持久化 刷新页面，缓存数据初始化的问题

1.安装依赖 npm i redux-persist

2.配置reudx

3.催持久化的数据进行添加,以全局配置数据为例

//store/index.ts

import {
  legacy_createStore,
  combineReducers,
  compose,
  applyMiddleware,
} from "redux";
import reduxThunk from "redux-thunk";
import { persistStore, persistReducer } from "redux-persist";
import reduxPromise from "redux-promise";
import storage from "redux-persist/lib/storage"; // 默认在localStorage
import global from "./global/reducer";
// 配置持久化
// 组合各个模块的reducer
const reducers = combineReducers({
  global,
});
const persistConfig = {
  key: "redux-state",
  storage,
};
const persistReducerConfig = persistReducer(persistConfig, reducers);

// 判断有没有__REDUX_DEVTOOLS_EXTENSION_COMPOSE__这个模块
let composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
  : compose; //rt

// 把仓库数据，浏览器redux-dev-tools，还有reduxThunk插件关联在store中
const store = legacy_createStore(
  persistReducerConfig,
  composeEnhancers(applyMiddleware(reduxThunk, reduxPromise))
);

let persistor = persistStore(store);
export { store, persistor };

//store/global/index.tsx

const store = {
  state: {
    themeConfig: {
      themeColor: "defaultAlgorithm", //defaultAlgorithm 1
      // 深色模式
      isDark: false,
      // 色弱模式(weak) || 灰色模式(gray)
      weakOrGray: "",
      // 面包屑导航
      breadcrumb: true,
      // 标签页
      tabs: true,
      // 页脚
      footer: true,
    },
  },
  actions: {
    // 只放同步的方法
    settingThemeColor(
      newState: { themeConfig: any },
      action: { type: string; val: string }
    ) {
      newState.themeConfig.themeColor = action.val;
    },
  },
  // 优化redux-thunk的异步写法(模仿Vuex的写法)
  asyncActions: {},
  actionNames: {},
};

let actionNames = {};
for (let key in store.actions) {
  actionNames[key] = key;
}
store.actionNames = actionNames;

export default store;

//store/global/reducer.ts
import global from "./index";
let reducer = (state = { ...global.state }, action: any) => {
  let newState = JSON.parse(JSON.stringify(state));
  // if (action.key == "redux-state" && action.payload) {
  //   newState = action.payload.global;
  // }
  for (let key in global.actionNames) {
    if (action.type === global.actionNames[key]) {
      global.actions[global.actionNames[key]](newState, action);
      break;
    }
  }
  return newState;
};
export default reducer;

4.缓存中对已配置的数据也显示了，但是页面刷新后，在页面的使用过的，修改过的缓存数据没有进行保存，并且对缓存数据进行了初始化，造成缓存无效，每次属性页面都会初始化数据.(令人头大)

5.解决方案：经过对代码数据的筛查，在store/global/reducer.ts文件下，对action字段的数据是有对数据进行保留，在数据驱动,初始化时，对数据缓存数据进行提取，并且赋值给redux中的数据，就可以解决问题，贴上代码

import global from "./index";
let reducer = (
  state = { ...global.state },
  action: { type: string; key: string; payload: any }
) => {
  let newState = JSON.parse(JSON.stringify(state));
  if (action.key == "redux-state" && action.payload) {
    newState = action.payload.global;
  }
  for (let key in global.actionNames) {
    if (action.type === global.actionNames[key]) {
      global.actions[global.actionNames[key]](newState, action);
      break;
    }
  }
  return newState;
};
export default reducer;

对action进行判断，action.payload 存在（首次进入页面 action.payload数undefind，会出bug），并且action.key（store绑定的key值）相等，进行赋值。问题已解决----如有更好，更简洁的方法，欢迎踩我