如何直接通过Query Hook获取任意参数下的接口数据渲染表格？

1. 简化RTK Query定义，移除手动存Store逻辑 #

首先删掉Query配置里的onQueryStarted手动dispatch代码——RTK Query本身会自动管理请求状态和数据缓存，完全不需要再把数据存到自定义的Redux slice里。

修改后的Query定义：

getOrderList: builder.query({
  query: (arg) => ({
    url: ORDER_LIST,
    params: { ...arg },
  }),
  providesTags: ["Orders"],
  // 移除原有的onQueryStarted及内部dispatch逻辑
}),

2. 表格组件直接通过Hook获取对应参数的数据 #

不用再从自定义Store里取数据，直接给useGetOrderListQuery传入当前需要的参数，Hook会返回该参数对应的请求结果、加载状态等。

示例代码：

// 表格组件：可以从props、URL参数或自身state获取查询参数
const OrderTable = ({ queryParams }) => {
  // 传入参数，直接拿到对应的数据和状态
  const { data: orderList, isFetching, error } = useGetOrderListQuery(queryParams);

  return (
    <div>
      {isFetching && <div>加载中...</div>}
      {error && <div>请求出错：{error.message}</div>}
      {/* 直接用Hook返回的数据渲染表格 */}
      <Table dataSource={orderList?.results || []} />
    </div>
  );
};

3. 参数变化自动触发请求，无需手动调用refetch #

RTK Query会自动监听传入Hook的参数变化，参数一改就会自动发起新请求并更新缓存，完全不需要额外写useEffect和refetch逻辑。

比如过滤器组件修改参数的场景：

// 过滤器组件
const FilterComponent = ({ onParamsUpdate }) => {
  const handleFilterChange = (newParams) => {
    onParamsUpdate(newParams); // 把新参数传递给父组件
  };

  // ...渲染筛选UI（比如下拉框、日期选择器等）
};

// 父组件统一管理参数
const OrderPage = () => {
  const [queryParams, setQueryParams] = useState({ status: "all" });

  return (
    <div>
      <FilterComponent onParamsUpdate={setQueryParams} />
      <OrderTable queryParams={queryParams} />
    </div>
  );
};

4. 多组件不同参数的缓存隔离 #

RTK Query会把传入的参数作为缓存Key，不同参数对应独立的缓存条目。比如组件A传{ status: "paid" }，组件B传{ status: "unpaid" }，两者的请求数据会被分别缓存，不会互相干扰，各自调用Hook就能拿到对应结果。

关键总结 #

• 彻底删掉自定义的orderList slice和setOrderData action，所有数据和请求状态都由RTK Query接管。
• 如果需要全局共享参数，只需要把参数存在Redux或Context里，组件取到参数后传入Hook即可，不用共享数据本身。
• 若需手动刷新（比如点击刷新按钮），直接用Hook返回的refetch方法就行，无需额外逻辑。

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