如何规划RTK缓存失效？基于日期校验的状态重置场景方案

应用启动时需检查localStorage中保存的状态日期：

• 若日期已过期则重置整个状态；若未过期则延后重复检查
• 部分场景下初始无日期，需在后续操作后生成

需触发状态重置或规划下一次检查的场景：

1. 应用启动（可能已选好日期或未选）
2. 应用持续运行（或后续再次打开），需检查日期并执行重置或规划检查
3. 选择日期的操作执行后，需规划后续的日期检查

希望将该逻辑集中在中间件（middleware）或store/api端点配置中，避免分散设置多轮检查与超时，询问应如何添加该逻辑，是否存在动态缓存失效或类似现成功能。

一、集中化逻辑实现方案 #

1. 基于Store中间件的实现（以Redux为例） #

编写全局中间件，监听特定action（如APP_INIT、DATE_SELECTED），同时在中间件初始化时执行首次检查：

• 初始化检查：中间件加载时读取localStorage中的状态日期，判断是否过期：
  • 过期：触发RESET_STATE action重置全局状态
  • 未过期：计算剩余有效期，用setTimeout安排下一次检查，检查时重复上述逻辑
  • 无日期：不执行操作，等待后续日期选择动作
• 监听日期选择action：捕获到DATE_SELECTED action时，将新日期存入localStorage，计算有效期后安排下一次检查
• 监听应用激活事件：配合visibilitychange事件，在应用从后台切回前台时触发日期检查，覆盖“后续再次打开”的场景

示例伪代码：

const dateCheckMiddleware = store => next => action => {
  // 初始化时执行首次检查
  if (action.type === 'APP_INIT') {
    const savedDate = localStorage.getItem('stateExpiryDate');
    if (savedDate) {
      const expiryTime = new Date(savedDate).getTime();
      const now = Date.now();
      if (now > expiryTime) {
        store.dispatch({ type: 'RESET_STATE' });
      } else {
        const delay = expiryTime - now;
        setTimeout(() => {
          store.dispatch({ type: 'CHECK_DATE_EXPIRY' });
        }, delay);
      }
    }
  }

  // 处理日期选择动作
  if (action.type === 'DATE_SELECTED') {
    const newExpiryDate = new Date(action.payload.date);
    localStorage.setItem('stateExpiryDate', newExpiryDate.toISOString());
    const delay = newExpiryDate.getTime() - Date.now();
    setTimeout(() => {
      store.dispatch({ type: 'CHECK_DATE_EXPIRY' });
    }, delay);
  }

  // 处理过期检查动作
  if (action.type === 'CHECK_DATE_EXPIRY') {
    const savedDate = localStorage.getItem('stateExpiryDate');
    if (savedDate && Date.now() > new Date(savedDate).getTime()) {
      store.dispatch({ type: 'RESET_STATE' });
    }
  }

  return next(action);
};

2. 基于Store API端点的集中配置 #

如果使用带API层的状态管理工具（如TanStack Query、SWR），可在全局查询配置中添加缓存失效逻辑：

• 将状态的过期日期作为缓存失效时间，在查询初始化、后台激活时自动校验
• 用户选择新日期后，更新缓存的失效时间参数，框架会自动管理后续检查

以TanStack Query为例，配置全局默认的动态失效时间：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: () => {
        const savedDate = localStorage.getItem('stateExpiryDate');
        return savedDate ? new Date(savedDate).getTime() - Date.now() : Infinity;
      },
      refetchOnWindowFocus: true, // 窗口聚焦时自动检查
      onError: (error) => {
        // 因过期触发失效时执行状态重置
        if (error.message === 'State expired') {
          // 执行状态重置逻辑
        }
      }
    }
  }
});

二、现成功能参考 #

这类动态缓存/状态失效需求，部分状态管理工具已有原生支持：

• TanStack Query/SWR：支持动态staleTime、cacheTime，以及refetchOnWindowFocus、refetchOnReconnect等自动触发检查的配置，可直接利用这些特性实现日期驱动的状态失效
• Redux Toolkit Query：通过invalidatesTags结合自定义逻辑，在日期过期时标记缓存失效，自动触发数据重置

三、关键优化点 #

• 避免重复设置超时：每次检查或日期选择后，清除上一次的超时定时器，防止多个定时器同时运行
• 结合页面可见性API：监听visibilitychange事件，在应用重新激活时强制检查一次，覆盖“后续再次打开”的场景
• 状态重置的原子性：重置状态时同步清除localStorage中的过期日期，避免循环触发检查

内容的提问来源于stack exchange，提问作者Rantiev