假设我们有3个组件。第一个是索引,它是父。第二个是过滤器组件,第三个是表组件。我使用突变过滤一些数据,并在表中显示它们。在过滤器组件中,我这样做:
const [filterSomeData] = useFilterSomeDataMutation(); const data = filterSomeData(myFilter);
现在我需要访问表组件中的数据。Redux工具包查询每个请求缓存结果,我如何访问它?
46qrfjad1#
一般情况下:如果您从服务器接收数据而不触发服务器上的更改,您应该使用查询,而不是变异。是的,您可以使用查询进行POST请求,语法与变异100%相同。然后你应该在所有需要该数据的组件中使用useQuery钩子,并使用与最初传入的参数相同的参数。这意味着如果你有类似过滤器的东西,你应该通过props传入该过滤器(通过将过滤器状态提升到公共父级),或者将该过滤器保存在Redux切片中,并在调用查询钩子之前从Redux获取它。因为您在多个组件中使用相同的参数调用useQuery钩子,所以它不会发出多个请求,而是重用第一个请求的响应。
useQuery
k10s72fa2#
您需要的是api.endpoints.foo.useLazyQuery()或api.useLazyFooQuery()。这样您就可以评估该端点上最后提取的数据。从官方文档中阅读更多信息:https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#usequerystate
api.endpoints.foo.useLazyQuery()
api.useLazyFooQuery()
41zrol4v3#
正如RTK文档中所解释的,建议的解决方案是使用与调用前相同的参数调用useQuery钩子。它从缓存端点检索数据,但由于我需要太多参数发送到查询钩子,我应该将其发送到其他组件,所以我更喜欢使用store对象从端点访问数据,如下所示:
store
const store = useStore(); const cachedQueries = store.getState().dashboardApi.queries;
然后我创建了一个对象,将端点的名称作为键,将它们的data作为值:
data
let dashboardResult: { [key: string]: any } = {}; Object.values(cachedQueries).forEach((item: any) => { dashboardResult = { ...dashboardResult, ...{ [item?.endpointName]: item?.data?.data } } });
3条答案
按热度按时间46qrfjad1#
一般情况下:如果您从服务器接收数据而不触发服务器上的更改,您应该使用查询,而不是变异。是的,您可以使用查询进行POST请求,语法与变异100%相同。
然后你应该在所有需要该数据的组件中使用
useQuery
钩子,并使用与最初传入的参数相同的参数。这意味着如果你有类似过滤器的东西,你应该通过props传入该过滤器(通过将过滤器状态提升到公共父级),或者将该过滤器保存在Redux切片中,并在调用查询钩子之前从Redux获取它。因为您在多个组件中使用相同的参数调用
useQuery
钩子,所以它不会发出多个请求,而是重用第一个请求的响应。k10s72fa2#
您需要的是
api.endpoints.foo.useLazyQuery()
或api.useLazyFooQuery()
。这样您就可以评估该端点上最后提取的数据。从官方文档中阅读更多信息:https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#usequerystate41zrol4v3#
正如RTK文档中所解释的,建议的解决方案是使用与调用前相同的参数调用
useQuery
钩子。它从缓存端点检索数据,但由于我需要太多参数发送到查询钩子,我应该将其发送到其他组件,所以我更喜欢使用store
对象从端点访问数据,如下所示:然后我创建了一个对象,将端点的名称作为键,将它们的
data
作为值: