如何在 react typescript 应用程序中重置从 RTK 查询中的钩子返回的 `data` `isLoading` 和 `error` 的值？答案

【问题标题】：How to reset the values of `data` `isLoading` and `error` returned from hook in RTK query in a react typescript application?如何在 react typescript 应用程序中重置从 RTK 查询中的钩子返回的 `data` `isLoading` 和 `error` 的值？
【发布时间】：2023-02-21 16:48:57
【问题描述】：

我正在尝试根据按钮单击事件从具有不同参数的端点获取 query 数据。

我通过 rtk 查询使用代码拆分方法并将基本服务创建为

import { createApi } from "@reduxjs/toolkit/query/react";
import { axiosBaseQuery } from "./util";

export const appApi = createApi({
  baseQuery: axiosBaseQuery({
    baseUrl: `https://baseurl`,
  }),
  refetchOnReconnect: true,
  endpoints: () => ({}),
});

并注入端点

import { appApi } from "./appApi";

export const popupAPI = appApi.injectEndpoints({
  endpoints: (builder) => ({
    getPopupData: builder.query<
      any,
      {
        id: string;
        startDate: string | Date | null;
        endDate: string | Date | null;
      }
    >({
      query: (params) => {
        const { id, startDate, endDate } = params;
        return {
          url: `kpi/?id=${id}&startdate=${startDate}&enddate=${endDate}`,
        };
      },
    }),
  }),
  overrideExisting: true,
});

export const { useGetPopupDataQuery } = popupAPI;

在组件文件中，start date 最初设置并在单击按钮时更改。

const startDate = moment()
  .subtract(selectedDays || 1, "days")
  .format("YYYY-MM-DD");
const endDate = moment()
  .subtract(1, "days")
  .format("YYYY-MM-DD");

selectedDays 最初设置为 1 并在单击按钮时更改为 2、3 等。我订阅了数据和其他变量，比如

const {
  data,
  isLoading,
  error,
} = useGetPopupDataQuery({
  id
  startDate: startDate,
  endDate: endDate,
});

第一次，当组件挂载 isLoading、data 和 error 的值时，数据获取完成后，isLoading 设置为 false，data 设置数据。但问题是当我单击按钮时，selectedDays 发生了变化，并且发送了一个 API 调用。但是之前的dataisLoadingerror没有改变/重置。所以我无法显示加载/中间阶段。数据获取完成后，检查 data 变量将填充新数据。我正在尝试解决此问题，任何帮助/建议都会非常有帮助。

【问题讨论】：

标签： reactjs typescript redux redux-toolkit rtk-query

【解决方案1】：

isLoading 标志在最初进行查询并且存储中没有缓存以前的请求时使用。您可能希望使用 isFetching 标志来代替 isLoading，或者除了 isLoading 之外。 data 只是上一个成功请求的缓存数据。

见useQuery

type UseQueryResult<T> = {
  // Base query state
  ...

  // Derived request status booleans
  isUninitialized: boolean // Query has not started yet.
  isLoading: boolean // Query is currently loading for the first time. No data yet.
  isFetching: boolean // Query is currently fetching, but might have data from an earlier request.
  isSuccess: boolean // Query has data from a successful load.
  isError: boolean // Query is currently in an "error" state.

  refetch: () => void // A function to force refetch the query
}
这是我用来处理后续请求的示例。
const {
  data,
  isLoading as popupDataIsLoading,
  isFetching as pPopupDataIsFetching,
  error,
} = useGetPopupDataQuery({
  id
  startDate: startDate,
  endDate: endDate,
});

const isLoading = popupDataIsLoading || pPopupDataIsFetching;
在这里，您可以在第一次加载查询时应用任何条件逻辑或者一个活动请求正在等待处理。

我不推荐它，但如果您正在寻找“核”选项，那么也存在resetApiState。
签名
const resetApiState = () => ({
  type: string,
  payload: undefined,
})
描述一个可以手动调度的 Redux action creator 完全重置 api 状态。这将立即删除所有现有缓存条目，所有查询都将被考虑 '未初始化'。

请注意，钩子还会跟踪本地组件状态中的状态，并且可能没有被 resetApiState 完全重置。

例子
dispatch(api.util.resetApiState())
这会重置整个 API 状态，但很可能是一个过于生硬的工具。谨慎使用。

【讨论】：