如何在指定时间后清除Redux Persist Store中的持久化存储数据

你的redux-persist-expire调用参数配置错误，是导致规则不生效的核心原因：

• 该插件第一个参数要求传入需要设置过期规则的状态切片键名，而非rootReducer对象。如果要给全局持久化数据设置过期规则，可传入persistConfig中定义的root键'root'；如果仅需要给购物车数据单独设置过期，传入购物车对应的reducer切片名即可（例如'cart'）。
• 另外该插件的过期校验仅会在redux持久化数据注水（rehydrate，即页面首次加载初始化store）时触发，不是运行时实时校验，你设置的10秒过期需要刷新页面才会触发清除逻辑，符合设计预期。

修正后的配置示例：

import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";
// 需提前导入rootReducer，你原代码漏了该导入声明
import rootReducer from './reducers'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const expireReducer = require("redux-persist-expire");

const persistConfig = {
    key: "root",
    storage: storage,
    // 第一个参数传状态键名而非rootReducer，这里给全局设置1小时过期
    transforms: [expireReducer('root', { expireSeconds: 3600 })],
};

const pReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(pReducer, composeEnhancers(applyMiddleware(thunk)));

export const persistor = persistStore(store);
export default store;

由于redux-persist-expire包已经多年未维护，兼容性和可定制性较差，推荐自定义redux-persist转换规则实现过期逻辑，灵活度更高：

import { createTransform } from 'redux-persist';

// 定义过期时间：1小时
const EXPIRE_TIME = 3600 * 1000;
// 购物车初始状态，过期时返回该值
const CART_INITIAL_STATE = {
  items: [],
  total: 0
}

const cartExpireTransform = createTransform(
  // 写入存储时触发：给数据加上时间戳
  (inboundState, key) => {
    if (key === 'cart') { // 仅给购物车切片加时间戳，不影响其他持久化数据
      return {
        ...inboundState,
        __persist_timestamp: Date.now()
      }
    }
    return inboundState;
  },
  // 读取存储时触发：校验是否过期
  (outboundState, key) => {
    if (key === 'cart') {
      const now = Date.now();
      // 超过过期时间则返回初始状态，自动清除旧数据
      if (now - outboundState.__persist_timestamp > EXPIRE_TIME) {
        return CART_INITIAL_STATE;
      }
      // 未过期则删除时间戳返回正常业务数据
      const { __persist_timestamp, ...restState } = outboundState;
      return restState;
    }
    return outboundState;
  }
);

// persistConfig中引入自定义转换规则
const persistConfig = {
  key: 'root',
  storage,
  transforms: [cartExpireTransform]
}

该方案的优势：

• 可以精准控制需要过期的状态切片，不会影响其他需要长期持久化的数据（比如用户登录状态、偏好设置等）
• 无第三方依赖，逻辑完全可控，可自定义过期后的降级逻辑
• 同样是在页面初始化注水时校验，关闭浏览器后再次打开依然会正常触发过期清除

内容的提问来源于stack exchange，提问作者Miss. Tea