RTK Query离线状态提示及联网自动重取数据方案咨询

一、离线状态展示提示信息 #

原代码仅处理了加载中、有数据、空数据三种场景，但**请求失败（如离线断网）**时，isLoading会变为false，且data为空，此时因缺少错误状态判断导致页面空白。

修改Cart.tsx代码，补充错误状态处理：

const ShoppingCart: React.FC<Props> = ({}) => {
  const user_id = useSelector((state: RootState) => state.Auth.user.user_id);

  // 解构获取错误状态相关属性
  const { data, isFetching, isLoading, error, isError } = useCartQuery({user_id});

  // 加载中（首次请求/重取请求）展示Loader
  if(isLoading || isFetching) {
    return <Loader />
  } 
  // 请求失败（含离线）展示提示
  else if(isError) {
    return <div>当前网络异常，请检查连接后重试</div>
  }
  // 有购物车数据时渲染组件
  else if(data && data.length > 0) {
    return <ShoppingCartComponent products={data} />
  } 
  // 购物车为空时展示空状态
  else if(data && data.length === 0) {
    return <ShoppingCartEmpty />
  }
  // 兜底异常提示
  else {
    return <div>加载失败，请稍后重试</div>
  }
}

export default ShoppingCart;

注：将isFetching加入加载判断，可在后续自动重取时展示加载状态。

二、联网后自动重新获取数据 #

RTK Query默认不监听网络状态变化，可通过以下两种方式实现联网自动重取：

方案1：使用RTK Query内置配置（推荐） #

在fetchBaseQuery中开启refetchOnReconnect，联网时自动重发所有失败的请求：

reducerPath: 'ShoppingCartApi',
baseQuery: fetchBaseQuery({ 
  baseUrl: `${API_ENDPOINT}/`,
  refetchOnReconnect: true // 开启联网自动重取
}),
tagTypes: ['CART'],
endpoints: (builder) => ({
  cart: builder.query<IProduct[], { user_id?: number; unlogged_uuid?: string; }>({
    query: (data) => ({
      url: '/cart',
      method: 'POST',
      body: data
    }),
    providesTags: ['CART']
  }),

也可仅给单个query配置refetchOnReconnect: true，实现局部重取控制。

方案2：手动监听网络状态（自定义场景） #

若需更精细的控制逻辑，可在组件中监听online事件触发重取：

const ShoppingCart: React.FC<Props> = ({}) => {
  const user_id = useSelector((state: RootState) => state.Auth.user.user_id);

  const { data, isFetching, isLoading, error, isError, refetch } = useCartQuery({user_id});

  useEffect(() => {
    const handleOnline = () => refetch();
    window.addEventListener('online', handleOnline);
    return () => window.removeEventListener('online', handleOnline);
  }, [refetch]);

  // 渲染逻辑同方案1
}

关键说明 #

• isLoading仅在首次请求初始化时为true，后续重取请求需用isFetching判断加载状态
• 可通过error.status等属性进一步区分离线、服务器错误等不同失败场景
• 内置refetchOnReconnect配置适合通用场景，手动监听则更灵活可控

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