Redux 结合 Redux-Persist 实现状态持久化存储示例

以下是代码示例：

import { combineReducers, configureStore } from '@reduxjs/toolkit'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import thunk from 'redux-thunk'

// 导入创建的reducer
import counter from './modules/user'

// 指定需要持久化存储的模块
const persistedModules = ['counter']

// 创建一个新的reducer，只持久化存储指定的模块
const rootReducer = (state, action) => {
  if (persistedModules.includes(action.type)) {
    return persistedReducer(state, action);
  }
  return state;
};

// 创建persistedReducer，只持久化存储指定的模块
const persistedReducer = persistReducer(
  {
    key: 'root',
    storage,
    whitelist: persistedModules,
  },
  rootReducer
);

// 配置store
const store = configureStore({
  reducer: persistedReducer, // 使用persistedReducer作为根reducer
  devTools: process.env.NODE_ENV !== 'production',
  middleware: [thunk],
})

export default store

代码说明：

引入必要的库：@reduxjs/toolkit, redux-persist, redux-persist/lib/storage, redux-thunk。
导入创建的 reducer：import counter from './modules/user'。
指定需要持久化存储的模块：const persistedModules = ['counter']。
创建一个新的 reducer：rootReducer，它只持久化存储指定的模块。
创建 persistedReducer，它使用 persistReducer 函数来持久化存储 rootReducer。
配置 store：使用 persistedReducer 作为根 reducer，开启开发者工具，并添加 thunk 中间件。