Redux Toolkit 进阶教程：RTK Query 基础使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00567/article/details/148324038

Redux Toolkit 进阶教程：RTK Query 基础使用指南

redux reduxjs/redux: Redux 是一个用于 JavaScript 的状态管理库，可以用于构建复杂的前端应用程序，支持多种状态管理和数据流模式，如 Flux，MVC，MVVM 等。项目地址: https://gitcode.com/gh_mirrors/re/redux

前言

在现代前端应用中，数据获取和状态管理是两个核心关注点。Redux 作为流行的状态管理方案，虽然能处理异步逻辑，但传统 Redux 在数据获取和缓存方面存在诸多痛点。本文将深入介绍 Redux Toolkit 中的 RTK Query 模块，它是专为 Redux 应用设计的数据获取和缓存解决方案。

RTK Query 核心概念

设计哲学

RTK Query 的核心理念是将"数据获取和缓存"从"状态管理"中分离出来。它针对服务器状态管理提供了开箱即用的解决方案，解决了以下常见问题：

请求去重：自动避免对相同数据的重复请求
缓存管理：智能缓存数据并处理缓存失效
加载状态：自动跟踪请求状态
数据更新：支持乐观更新和后台刷新
性能优化：支持分页和懒加载等场景

架构特点

RTK Query 构建在 Redux Toolkit 核心 API 之上，具有以下显著特点：

基于 Redux 生态：底层使用 createSlice 和 createAsyncThunk 实现
UI 框架无关：可与 React、Vue、Angular 等任何 UI 层配合使用
类型安全：完全使用 TypeScript 编写，提供优秀的类型支持
代码生成：支持从 OpenAPI 规范生成 API 定义
体积优化：采用智能的代码分割策略，仅增加约 9KB 的打包体积

基础使用指南

创建 API Slice

RTK Query 的核心是 createApi 方法，每个应用通常只需要一个 API Slice：

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

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/fakeApi' }),
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], void>({
      query: () => '/posts'
    })
  })
})

关键配置说明：

reducerPath: 指定在 Redux store 中的挂载路径
baseQuery: 配置基础请求方法，通常使用 fetchBaseQuery
endpoints: 定义所有 API 端点

端点定义详解

RTK Query 支持两种端点类型：

查询(Query): 用于获取数据的只读请求
变更(Mutation): 用于创建/更新数据的写操作

查询端点定义示例：

getPostById: builder.query<Post, string>({
  query: (postId) => `/posts/${postId}`,
  // 可选配置项
  keepUnusedDataFor: 60 // 缓存保留时间(秒)
})

变更端点定义示例：

addNewPost: builder.mutation<Post, Partial<Post>>({
  query: (post) => ({
    url: '/posts',
    method: 'POST',
    body: post
  })
})

集成到 React 组件

RTK Query 会自动为每个端点生成 React Hook：

// 自动生成的Hook
export const { useGetPostsQuery, useAddNewPostMutation } = apiSlice

在组件中使用：

function PostsList() {
  const {
    data: posts,
    isLoading,
    isError,
    error
  } = useGetPostsQuery()

  if (isLoading) return <Spinner />
  if (isError) return <div>{error.toString()}</div>

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Hook 返回的对象包含以下关键字段：