Redux Toolkit 中持久化路由配置数组的实践指南

要将路由配置数组保存到 Redux Toolkit 中并持久化,你可以按照以下步骤进行操作:

1. 创建一个 Slice 来管理路由配置

在 Redux Toolkit 中,我们使用 createSlice 来创建一个 slice,用于管理路由配置的状态。

import { createSlice } from '@reduxjs/toolkit';

const routesSlice = createSlice({
  name: 'routes',
  initialState: [],
  reducers: {
    setRoutes: (state, action) => action.payload,
  },
});

export const { setRoutes } = routesSlice.actions;
export default routesSlice.reducer;

在这个例子中,我们创建了一个名为 routes 的 slice,其初始状态为空数组。我们还创建了一个 setRoutes 的 reducer,用于更新路由配置数组。

2. 在应用程序启动时加载路由配置

在应用程序启动时,你可以从持久化存储中读取序列化的路由配置数据(如果有的话),使用 Hydrate 函数反序列化,并将其分发到 Redux store 中。

import { Hydrate } from 'react-router-dom';
import { setRoutes } from './routesSlice';

const serializedRoutes = localStorage.getItem('routes');
let routes = [];

if (serializedRoutes) {
  routes = Hydrate(serializedRoutes);
}

store.dispatch(setRoutes(routes));

3. 使用 Redux Persist 持久化路由配置

接下来,你需要使用 Redux Persist 来持久化 Redux store 中的路由配置数据。

import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { configureStore } from '@reduxjs/toolkit';
import routesReducer from './routesSlice';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, routesReducer);

const store = configureStore({
  reducer: persistedReducer,
});

const persistor = persistStore(store);

export { store, persistor };

在这个示例中,我们使用 persistReducer 包装了 routesReducer,并使用 persistStore 创建了一个 persistor 实例。这将确保路由配置数据被持久化到指定的存储中(在这里是 localStorage)。

4. 在应用程序中使用持久化的路由配置

最后,你可以在应用程序中使用 Redux store 中的路由配置数据来渲染应用程序。

import { useSelector } from 'react-redux';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const App = () => {
  const routes = useSelector((state) => state.routes);
  const router = createBrowserRouter(routes);

  return <RouterProvider router={router} />;
};

在这个示例中,我们使用 useSelector 从 Redux store 中获取路由配置数组,并使用它来创建一个 BrowserRouter 实例,最后通过 RouterProvider 渲染应用程序。

通过这种方式,你可以将路由配置数组保存到 Redux Toolkit 的 store 中,并使用 Redux Persist 持久化到本地存储中。每次应用程序启动时,你都可以从本地存储中恢复路由配置数据,从而避免重复获取或计算路由配置。

需要注意的是,如果你的路由配置发生变化,你需要相应地更新 Redux store 中的路由配置数据。此外,由于路由配置可能包含 React 元素,因此在持久化之前需要使用 Dehydrate 函数进行序列化,在恢复时使用 Hydrate 函数进行反序列化。