Redux Toolkit 与 Redux Persist 结合:路由状态无法序列化的解决之道

Redux Toolkit 是 Redux 官方的一个包装工具,旨在简化 Redux 的使用。当使用 Redux Toolkit 进行路由状态持久化时,也可能会遇到与普通 Redux 类似的序列化问题。以下是一些解决方案:

1. 排除路由状态(reducer)的持久化

如果你不需要持久化路由状态,可以在 Redux Persist 的配置中排除相关的 reducer。在 Redux Toolkit 中,你可以像这样配置:

import { combineReducers } from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import counterReducer from './counterSlice';
import routerReducer from './routerSlice'; // 假设你使用了 Redux Toolkit 的 createSlice 定义路由 reducer

const rootReducer = combineReducers({
  counter: counterReducer,
  router: routerReducer,
});

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['router'], // 排除路由 reducer
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default persistedReducer;

2. 自定义序列化和反序列化函数

如果你需要持久化路由状态,你可以为路由状态定义自定义的序列化和反序列化函数,类似于处理普通 Redux 中的情况。

import { createMigrate } from 'redux-persist';
import { autoMergeLevel2 } from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const migrations = {
  0: (state) => {
    return {
      ...state,
      router: serializeRouterState(state.router),
    };
  },
  1: (state) => {
    return {
      ...state,
      router: deserializeRouterState(state.router),
    };
  },
};

const migrateState = createMigrate(migrations, { putMigratedStateInCacheMetadata: true });

const persistConfig = {
  key: 'root',
  storage,
  version: 1,
  stateReconciler: autoMergeLevel2,
  migrate: migrateState,
};

你需要自行实现 serializeRouterState 和 deserializeRouterState 函数,具体做法取决于你的路由状态结构。

3. 使用第三方库处理路由持久化

与普通 Redux 类似,你也可以使用第三方库如 redux-persist-react-router 或 redux-first-router 来简化路由状态的持久化过程。这些库提供了现成的序列化和反序列化逻辑,可以更轻松地处理路由状态的持久化。

无论采用哪种解决方案,关键是确保路由状态能够正确地序列化和反序列化,避免出现无法持久化或加载状态的问题。Redux Toolkit 虽然简化了 Redux 的使用,但在处理路由状态序列化问题时,仍需要采取类似于普通 Redux 的方式进行处理。