无论发送的参数如何，都直接从查询挂钩获取数据

Question

我有一个表，其中呈现所有获取的数据，并且我有不同的组件，这些组件使用不同的参数（过滤器）进行 api 调用。无论发送的参数如何，如何使用查询挂钩来获取任何获取的数据以在该表中呈现？

现在我将获取的数据存储到全局存储中的变量中，并使用 useSelector 在表中访问它，但我认为有一些步骤可以避免，因为我双重存储了获取的数据。 （一个带有查询，第二个我用dispatch()手动存储）。

示例如下： 在这里，我从 api 获取数据，并解构重新获取函数，以便在查询参数发生变化时触发获取。参数存储在 Redux 存储中。

const query = useSelector((state) => state.orderList.queryParams);

  const { refetch } = useGetOrderListQuery(query);

  useEffect(() => {
    refetch(query);
  }, [query, refetch]);

此钩子用于表格组件中，用于显示是否正在加载

const { isFetching } = useGetOrderListQuery(query);

如您所见，我不使用查询挂钩中的数据。我在里面手动设置数据

useGetOrderListQuery

。

getOrderList: builder.query({
      query: (arg) => ({
        url: ORDER_LIST,
        params: { ...arg },
      }),
      providesTags: ["Orders"],
      async onQueryStarted(_, { dispatch, queryFulfilled }) {
        try {
    const { data } = await queryFulfilled;
    console.log(data);
    dispatch(setOrderData(data.results));
  } catch (err) {
    console.log(err);
  }
      },
    }),

我相信我可以避免这样做

dispatch(setOrderData(data.results)); 

并直接从查询访问数据，但我不知道如何实现。

现在我将获取的数据存储在 redux 存储中，但我认为我可以避免它并在每次进行 api 调用时从查询 itekf 获取数据。问题是有时我需要传递不同的参数来查询，而我将无法获得相同的数据。

Answer 1

是的，你采取额外的步骤是徒劳的。基本上，你有两种主要方法。

- 挂钩

您可以直接从挂钩访问

data

：

OrdersScreen.tsx

const filters = useAppSelector(selectOrderFilters);

const { data: orderList, isLoading, refetch } = useGetOrderListQuery(filters, { 
  refetchOnMountOrArgChange: true 
});

<Flatlist 
  data={orderList}
  keyExtractor={(item) => String(item?.id)}
  renderItem={renderItem}
/>

- 选择器

如果您想直接从

Redux

访问数据并且无需挂钩，则无需创建新的

Slice

，而是可以创建自定义选择器来访问缓存的数据。
假设您的 apiSlice 名为

ordersApiSlice

:

export const selectOrders = (state: RootState) => ordersApiSlice.endpoints.getOrderList.select(store.orderList.queryParams)(state);

// Usage: 
const orders = useAppSelector(selectOrders);

如果您必须在使用数据或类似的操作之前管理数据，请记住使用

createSelector()

。