Redux Toolkit 中的 RTK Query 快速入门指南

时飞城Herdsman

于 2025-06-03 09:12:47 发布

阅读量273

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00909/article/details/148394331

Redux Toolkit 中的 RTK Query 快速入门指南

redux-toolkit The official, opinionated, batteries-included toolset for efficient Redux development 项目地址: https://gitcode.com/gh_mirrors/re/redux-toolkit

什么是 RTK Query

RTK Query 是 Redux Toolkit 提供的一个强大的数据获取和缓存工具，专门用于简化 Web 应用程序中常见的数据加载场景。作为 Redux Toolkit 的附加功能，它基于 Redux Toolkit 的核心 API（如 createSlice 和 createAsyncThunk）构建，为开发者提供了一套完整的解决方案。

核心优势

自动缓存管理：自动处理数据缓存，避免重复请求
请求状态跟踪：提供完整的加载、错误和成功状态
请求去重：相同请求只会发送一次
自动重新获取：支持缓存失效和自动刷新机制
React 钩子集成：自动生成 React 钩子，简化组件集成

快速开始

1. 创建 API 服务

首先我们需要定义一个 API 服务。这里以 PokeAPI 为例：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
  endpoints: (builder) => ({
    getPokemonByName: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
  }),
})

export const { useGetPokemonByNameQuery } = pokemonApi

关键点说明：

createApi 是创建 API 服务的核心函数
reducerPath 指定了在 Redux store 中的存储位置
baseQuery 配置了基础请求设置
endpoints 定义了具体的 API 端点

2. 配置 Redux Store

接下来需要将 API 服务集成到 Redux store 中：

import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { pokemonApi } from './services/pokemon'

export const store = configureStore({
  reducer: {
    [pokemonApi.reducerPath]: pokemonApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(pokemonApi.middleware),
})

setupListeners(store.dispatch)

注意事项：

必须添加 API 中间件以启用缓存等功能
setupListeners 用于实现自动重连等高级功能

3. 在组件中使用

定义好服务后，可以在组件中使用自动生成的钩子：

import { useGetPokemonByNameQuery } from './services/pokemon'

function App() {
  const { data, error, isLoading } = useGetPokemonByNameQuery('bulbasaur')

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error occurred!</div>

  return (
    <div>
      <h3>{data.species.name}</h3>
      <img src={data.sprites.front_shiny} alt={data.species.name} />
    </div>
  )
}

钩子返回的对象包含：

data: 响应数据
error: 错误信息
isLoading: 首次加载状态
isFetching: 任何请求状态
refetch: 手动重新获取函数

高级特性

请求去重与共享

RTK Query 会自动处理相同请求的去重。多个组件请求相同数据时，只会发送一个实际请求，所有组件共享同一份数据。

缓存生命周期管理

数据默认会在组件卸载后保留一段时间（默认60秒），之后如果没有组件订阅该数据，则会从缓存中清除。

标签失效机制

可以通过定义标签关系实现跨端点的缓存失效和自动重新获取：

endpoints: (builder) => ({
  getPosts: builder.query({
    query: () => 'posts',
    providesTags: ['Posts']
  }),
  addPost: builder.mutation({
    query: (body) => ({
      url: 'posts',
      method: 'POST',
      body
    }),
    invalidatesTags: ['Posts']
  })
})