如何让redux-persist在持久化数据恢复至Reducer时通知我

我之前在处理大量持久化数据的时候也碰到过这个需求，redux-persist其实给我们提供了好几套方案来监听数据恢复完成的时机，刚好能完美解决你的版本验证和生成lookup对象的问题，我给你拆解几个最实用的方法：

1. 用PersistGate的onSuccess回调（最推荐） #

PersistGate是redux-persist提供的React组件，它会在数据完全恢复到reducer之后才渲染你的应用。你可以利用它的onSuccess属性，在数据恢复完成后立即执行后续逻辑——这完全符合你的需求，因为你肯定不想在数据没加载好的时候就处理版本验证或者生成lookup对象。

示例代码：

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // localStorage
import { createStore } from 'redux';
import rootReducer from './reducers';

// 持久化配置
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['app', 'largeDataset'], // 只持久化需要的slice
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

// 渲染应用
ReactDOM.render(
  <Provider store={store}>
    <PersistGate 
      loading={<div>加载中...</div>} // 数据恢复时显示的加载组件
      persistor={persistor}
      onSuccess={() => {
        // 这里就是数据恢复完成的信号！
        const currentState = store.getState();
        
        // 第一步：版本验证
        const savedVersion = currentState.app.version;
        const appCurrentVersion = process.env.REACT_APP_VERSION; // 从环境变量取当前版本
        
        if (savedVersion !== appCurrentVersion) {
          // 版本不匹配的处理逻辑：比如清除旧数据、执行数据迁移
          persistor.purge(); // 清除所有持久化数据
          // 或者你可以写自定义的迁移逻辑，比如把旧格式的数据转换成新格式
        }
        
        // 第二步：生成lookup对象
        const rawDataset = currentState.largeDataset;
        // 注意：因为这个对象太大存不了redux-storage，所以别放到持久化的reducer里
        const lookupObject = rawDataset.reduce((acc, item) => {
          acc[item.id] = item; // 假设用id作为键
          return acc;
        }, {});
        
        // 可以把lookup对象存在内存里，或者放到非持久化的redux slice中
        store.dispatch(setLookup(lookupObject)); // 假设你有一个setLookup的action
      }}
    >
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

2. 用persistStore的回调函数 #

如果你不需要通过React组件控制渲染时机，也可以直接给persistStore传一个回调，它会在数据恢复完成后触发：

const persistor = persistStore(store, null, () => {
  console.log('数据恢复完成！');
  // 在这里执行版本验证和lookup生成逻辑，和上面的onSuccess里的代码一样
});

不过要注意，这个回调会在PersistGate渲染应用之前触发，如果你需要确保应用渲染时lookup对象已经准备好，还是用第一种方法更稳妥。

3. 监听persist/REHYDRATE Action #

redux-persist在数据恢复时会分发一个persist/REHYDRATE的action，你可以在reducer或者自定义middleware里监听这个action：

import { REHYDRATE } from 'redux-persist';

// 在reducer中监听
function appReducer(state, action) {
  switch (action.type) {
    case REHYDRATE:
      const incomingData = action.payload;
      if (incomingData) {
        // 版本验证逻辑
        if (incomingData.app.version !== process.env.REACT_APP_VERSION) {
          // 返回清理后的state，或者触发迁移
          return { 
            ...state, 
            version: process.env.REACT_APP_VERSION,
            largeDataset: [] // 重置旧数据
          };
        }
      }
      return state;
    default:
      return state;
  }
}

不过不建议在reducer里生成lookup对象，因为reducer必须是纯函数，处理6万多条数据的计算逻辑会阻塞reducer，导致应用卡顿。这种副作用逻辑还是放到onSuccess或者persistStore回调里更合适。

进阶：用redux-persist的migrate做版本管理 #

如果你需要更规范的版本迁移，而不是简单的清除数据，可以用redux-persist的createMigrate工具来定义版本迁移规则：

import createMigrate from 'redux-persist/es/createMigrate';

// 定义各个版本的迁移逻辑
const migrations = {
  0: (state) => {
    // 从版本0升级到版本1：添加新字段
    return { ...state, app: { ...state.app, newFeatureEnabled: false } };
  },
  1: (state) => {
    // 从版本1升级到版本2：删除旧字段，调整数据结构
    const newDataset = state.largeDataset.map(item => ({ ...item, newId: item.id + '_v2' }));
    return { ...state, largeDataset: newDataset, oldField: undefined };
  }
};

const persistConfig = {
  key: 'root',
  storage,
  version: 2, // 当前应用的版本号
  migrate: createMigrate(migrations, { debug: false }) // 开启debug可以看到迁移日志
};

这样redux-persist会自动对比存储数据的版本和当前版本，执行对应的迁移逻辑，比自己在回调里判断版本更可靠。

总结一下，最适合你的方案是：用PersistGate的onSuccess回调监听数据恢复完成，结合createMigrate做版本验证和迁移，然后在回调里生成lookup对象并存储到内存或非持久化的redux状态中。

内容的提问来源于stack exchange，提问作者Teamol