You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何按需重置RTK Query的isSuccess状态?求更优雅方案

解决方案

方案1:利用RTK Query原生轮询功能替代自定义轮询

RTK Query的useQuery本身支持pollingInterval参数,可以直接实现定时轮询,无需额外懒查询。结合状态判断控制轮询启停,逻辑更简洁:

import { useGetUsersQuery } from './api';
import { isEqual } from 'lodash'; // 推荐用深对比替代JSON.stringify,避免性能问题

const UserTable = () => {
  const { data: users, stopPolling, startPolling } = useGetUsersQuery(
    {},
    { pollingInterval: 5000 } // 初始每5秒轮询一次
  );

  // 根据业务逻辑判断是否所有用户都已加载完成(示例:检查用户是否有加载状态字段)
  const allUsersLoaded = users?.every(user =>!user.isLoading);

  useEffect(() => {
    if (allUsersLoaded) {
      stopPolling(); // 所有用户加载完成后停止轮询
    } else {
      startPolling(5000); // 未完成则保持轮询
    }
  }, [allUsersLoaded, stopPolling, startPolling]);

  return <Table data={users} />;
};

方案2:手动管理轮询状态(替代依赖isSuccess)

如果必须保留自定义数据对比逻辑,不要依赖懒查询的isSuccess状态,改用useState手动控制轮询周期:

import { useGetUsersQuery, useLazyGetUsersValidatorQuery } from './api';
import { useState, useEffect } from'react';
import { isEqual } from 'lodash';

const UserTable = () => {
  const { data: users, refetch: usersRefetch } = useGetUsersQuery();
  const [trigger] = useLazyGetUsersValidatorQuery();
  const [isPolling, setIsPolling] = useState(true);

  useEffect(() => {
    if (!isPolling) return;

    const pollTimer = setTimeout(async () => {
      const queryResult = await trigger();
      if (queryResult.isSuccess) {
        // 对比新旧数据,不一致则重新获取
        if (!isEqual(users, queryResult.data)) {
          usersRefetch();
        }
        // 判断是否需要停止轮询(示例:所有用户加载完成)
        const allLoaded = queryResult.data?.every(user =>!user.isLoading);
        setIsPolling(!allLoaded);
      }
    }, 5000);

    return () => clearTimeout(pollTimer);
  }, [isPolling, users, trigger, usersRefetch]);

  return <Table data={users} />;
};

方案3:重置特定查询状态(不推荐,仅作补充)

如果一定要重置懒查询的isSuccess状态,可以通过RTK Query的API工具手动dispatch重置动作,但会重置该查询的所有状态(加载、数据等),需谨慎使用:

import { api } from './api'; // 你的RTK Query API切片
import { useDispatch } from'react-redux';

const UserTable = () => {
  const dispatch = useDispatch();
  const [trigger] = useLazyGetUsersValidatorQuery();

  // 在需要重置时调用此函数
  const resetQueryState = () => {
    dispatch(api.util.resetQueryState('getUsersValidator')); // 替换为你的查询名称
  };
};

内容的提问来源于stack exchange,提问作者Mormen

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.12 10:53:01