无需传递缓存键,在Selector中读取RTK-Query状态的方法
解决RTK-Query无需缓存键直接获取唯一存储条目的问题
RTK-Query完全支持这种不用传缓存键、直接获取唯一存储条目的需求,给你几个实用的实现方式:
方法一:自定义Selector遍历缓存取唯一条目
RTK-Query的所有查询缓存都存在Redux状态的state.api.queries路径下,每个条目包含endpointName字段标记所属的接口端点。你可以写一个自定义Selector,过滤出目标端点的缓存条目,直接取第一个(因为你的场景里只有Paris这一个请求):
import { createSelector } from '@reduxjs/toolkit'; // 自定义Selector:获取getWeather端点的唯一缓存数据 export const selectWeatherData = createSelector( state => state.api.queries, queries => { // 过滤出属于getWeather端点的查询条目 const weatherQueries = Object.values(queries).filter( query => query.endpointName === 'getWeather' ); // 返回第一个条目的数据(因为只有Paris的请求) return weatherQueries.length > 0 ? weatherQueries[0].data : null; } );
之后在组件或其他Selector里直接调用selectWeatherData(state)就能拿到Paris的天气数据,不用再传Paris作为参数。
方法二:结合全局存储的城市参数(可选)
如果你担心未来可能有多个城市请求,但启动时的城市是固定存在Redux里的,可以先在自己的slice里存储初始城市(比如Paris),然后在Selector里自动取这个参数调用RTK-Query的内置endpoint.select:
import { api } from './yourApiSlice'; import { createSelector } from '@reduxjs/toolkit'; // 假设你的slice里有selectInitialCity这个Selector import { selectInitialCity } from './gameSlice'; export const selectWeatherData = createSelector( state => state, selectInitialCity, (state, city) => api.endpoints.getWeather.select(city)(state)?.data );
这种方式更灵活,即使未来初始城市变化,也不用修改Selector逻辑。
注意事项
- 如果你确定只会有这一个请求,方法一足够简单直接;如果有扩展需求,方法二更稳妥。
- 避免直接硬编码缓存键(比如
getWeather('Paris')生成的字符串键),因为RTK-Query的缓存键格式可能随版本变化,用endpointName过滤更可靠。
内容的提问来源于stack exchange,提问作者Mik378
相关产品推荐
相关产品推荐

