在Redux Toolkit中使用redux-persist进行状态持久化

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

1. 安装依赖

npm install redux-persist
1

2. 配置 persistConfig

在 Redux store 配置文件中(例如 store.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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. 创建持久化的 Redux store

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

import { configureStore } from '@reduxjs/toolkit';
import { persistStore } from 'redux-persist';
import persistedReducer from './rootReducer'; // 导入上面配置的持久化根 reducer

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: false, // 避免由于使用 Immutable.js 而引发的序列化检查错误
  }),
});

const persistor = persistStore(store);

export { store, persistor };
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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