reactjs 在RTK查询中访问缓存数据(新增)

x33g5p2x  于 2023-01-30  发布在  React
关注(0)|答案(3)|浏览(166)

假设我们有3个组件。第一个是索引,它是父。第二个是过滤器组件,第三个是表组件。我使用突变过滤一些数据,并在表中显示它们。在过滤器组件中,我这样做:

const [filterSomeData] = useFilterSomeDataMutation();
  const data = filterSomeData(myFilter);

现在我需要访问表组件中的数据。Redux工具包查询每个请求缓存结果,我如何访问它?

46qrfjad

46qrfjad1#

一般情况下:如果您从服务器接收数据而不触发服务器上的更改,您应该使用查询,而不是变异。是的,您可以使用查询进行POST请求,语法与变异100%相同。
然后你应该在所有需要该数据的组件中使用useQuery钩子,并使用与最初传入的参数相同的参数。这意味着如果你有类似过滤器的东西,你应该通过props传入该过滤器(通过将过滤器状态提升到公共父级),或者将该过滤器保存在Redux切片中,并在调用查询钩子之前从Redux获取它。
因为您在多个组件中使用相同的参数调用useQuery钩子,所以它不会发出多个请求,而是重用第一个请求的响应。

k10s72fa

k10s72fa2#

您需要的是api.endpoints.foo.useLazyQuery()api.useLazyFooQuery()。这样您就可以评估该端点上最后提取的数据。从官方文档中阅读更多信息:https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#usequerystate

41zrol4v

41zrol4v3#

正如RTK文档中所解释的,建议的解决方案是使用与调用前相同的参数调用useQuery钩子。它从缓存端点检索数据,但由于我需要太多参数发送到查询钩子,我应该将其发送到其他组件,所以我更喜欢使用store对象从端点访问数据,如下所示:

const store = useStore();
    const cachedQueries = store.getState().dashboardApi.queries;

然后我创建了一个对象,将端点的名称作为键,将它们的data作为值:

let dashboardResult: { [key: string]: any } = {};        
    Object.values(cachedQueries).forEach((item: any) => {
        dashboardResult = { 
           ...dashboardResult,
           ...{ [item?.endpointName]: item?.data?.data }
        }
    });

相关问题