在 Redux Toolkit 中使用 redux-persist 持久化插件的步骤如下:

1. 安装依赖

npm install redux-persist

2. 配置 persistConfig

在 Redux store 配置文件中(例如 rootReducer.js)，导入必要的模块并配置持久化选项:

import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';// Redux Toolkit Slices
import counterSlice from './counterSlice';const rootReducer = combineReducers({counter: counterSlice.reducer
});const persistConfig = {key: 'root',storage,whitelist: ['counter'] // 指定需要持久化的 reducer 键名
};const persistedReducer = persistReducer(persistConfig, rootReducer);export default persistedReducer;

3. 创建持久化的 Redux store

在 Redux store 创建文件中(例如 store.js)，创建持久化的 store 并导出 persistor 实例:

import { configureStore } from '@reduxjs/toolkit';
import { persistStore } from 'redux-persist';
import persistedReducer from './rootReducer'; // 导入上面配置的持久化根 reducerconst store = configureStore({reducer: persistedReducer,middleware: (getDefaultMiddleware) => getDefaultMiddleware({serializableCheck: false, // 避免由于使用 Immutable.js 而引发的序列化检查错误}),
});const persistor = persistStore(store);export { store, persistor };

4. 在 React 应用程序入口文件中使用 PersistGate

在 React 应用程序的入口文件中(例如 index.js)，使用 PersistGate 组件包裹根组件:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import App from './App';ReactDOM.render(<Provider store={store}><PersistGate loading={<div>Loading...</div>} persistor={persistor}><App /></PersistGate></Provider>,document.getElementById('root')
);

通过这些步骤，你就可以在 Redux Toolkit 应用程序中使用 redux-persist 来持久化 Redux store 的状态。当应用程序重新加载时，PersistGate 将从持久化存储中恢复状态，并在恢复完成后渲染应用程序根组件。

值得注意的是，在使用 redux-persist 时需要小心处理不可序列化的数据类型(如函数、Promise等)，否则可能会导致持久化出现问题。你可以通过配置 serialize 和 deserialize 选项来自定义序列化和反序列化行为。