在React Native应用中如何通过Redux RTK访问缓存状态而不重复触发查询

问题原因 #

你直接从state.api.queries解构getUser拿不到数据，是因为RTK Query在存储查询缓存时，key不是单纯的端点名称，而是端点名 + 序列化后的查询入参拼接的字符串，用来区分同一个端点不同入参的缓存结果。

解决方案（推荐度从高到低） #

方案1：直接复用自动生成的查询钩子（最推荐）

RTK Query 的useGetUserQuery默认自带缓存复用逻辑，只要你传入的input参数和之前触发查询的参数完全一致，它会直接读取已有缓存，不会发送重复请求，完全满足你的需求，写法和你之前触发查询的写法一模一样：

// 其他页面直接调用即可，相同入参不会触发重复请求
const { data: userData } = useGetUserQuery(input)

如果需要更明确的缓存强制复用规则，可以额外添加配置项：

const { data: userData } = useGetUserQuery(input, {
  // 强制挂载或参数变更时也不重新请求，完全走缓存
  refetchOnMountOrArgChange: false,
  refetchOnReconnect: false,
  refetchOnFocus: false
})

方案2：使用RTK Query内置的select方法读取缓存

如果你不想用查询钩子，需要手动从store中选择数据，可以用端点自带的select方法生成专属selector，传入和之前查询相同的入参即可：

const userData = useAppSelector(
  userApi.endpoints.getUser.select(input)
)

这个方法会自动匹配RTK Query内部的序列化规则生成缓存key，不用自己处理参数拼接逻辑，稳定性很高。

方案3：手动读取缓存（不推荐）

如果你一定要手动从state.api.queries读取，需要自己按RTK Query的规则拼接缓存key：

// 注意：序列化规则要和RTK Query内部的序列化逻辑完全一致，否则会匹配失败
const cacheKey = `getUser(${JSON.stringify(input)})`
const userCache = useAppSelector(state => state.api.queries[cacheKey])
const userData = userCache?.data

这种方式容易因为入参序列化规则不一致、参数顺序不同等问题导致匹配失败，仅适合调试场景使用。

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