AntdPro-Simple中使用redux-toolkit及配置持久化存储

import { createLogger } from 'redux-logger';
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 使用本地存储
import { PersistGate } from 'redux-persist/integration/react';
import rootReducer from './reducers'; // 假设这是你的根reducer文件
 
// 创建redux-logger中间件
const middleware = [
  ...getDefaultMiddleware(),
  createLogger({
    level: {
      prevState: true,
      action: true,
      nextState: true,
      error: true,
    },
  }),
];
 
// 配置redux-persist持久化设置
const persistConfig = {
  key: 'root',
  storage, // 使用本地存储
};
 
// 创建持久化reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
 
// 配置store
export const store = configureStore({
  reducer: persistedReducer,
  middleware,
  devTools: process.env.NODE_ENV !== 'production', // 开发环境下启用Redux DevTools
});
 
// 导出PersistGate组件，确保在应用初始化时持久化数据加载完毕
export const ReduxPersistGate = () => (
  <PersistGate loading={null} persistor={persistStore(store)}>
    {/* 你的应用组件 */}
  </PersistGate>
);

这段代码展示了如何在Ant Design Pro中使用Redux Toolkit和redux-persist来配置和持久化存储状态。首先，我们引入必要的库并创建redux-logger中间件。然后，我们配置redux-persist的持久化设置，并创建一个持久化的reducer。最后，我们配置store并导出一个PersistGate组件，以确保在应用初始化时持久化数据已经加载。