完整的 redux 工具包（部分 --js教程-PHP中文网

完整的 redux 工具包（部分 -

WBOY

发布： 2024-09-10 22:35:08

原创

836 人浏览过

Complete redux toolkit (Part -

第三部分：RTK查询简介

在这一部分我们将介绍 RTK 查询

1。什么是RTK查询？

虽然 Redux Toolkit 提供了强大的工具来管理状态和异步逻辑，但它仍然需要大量的样板代码来处理数据获取和缓存。 RTK Query，在 Redux Toolkit v1.6 中引入，旨在通过提供一组强大的工具来解决这个问题，以最少的设置实现高效的数据获取和缓存。

RTK 查询的主要功能：

数据获取和缓存：自动处理缓存、失效和重新获取。
乐观更新和实时同步：轻松管理乐观更新和实时数据同步。
声明式和简单的 API： 直观的 API 设计，具有最少的样板代码。
与 Redux Toolkit 集成：构建在 Redux Toolkit 之上，允许无缝集成。

2. 设置RTK查询

要开始使用 RTK 查询，我们需要定义一个 API 服务，指定如何获取数据以及哪些端点可用。让我们使用简单的帖子 API 创建一个示例。

第 1 步：定义 API 服务

在 features/posts 目录中创建一个名为 postsApi.js 的新文件。该文件将定义用于获取和修改帖子的 API 端点。

// src/features/posts/postsApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// Define an API service using RTK Query
export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
    }),
  }),
});

// Export hooks for usage in functional components
export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

登录后复制

说明：

createApi：该函数用于定义API服务。它生成一个 API 切片，自动为您管理 store、reducers 和 actions。
baseQuery：定义 API 基本 URL 的函数。 fetchBaseQuery 是标准 fetch API 的轻量级包装器。
端点：定义 API 端点的函数。我们在这里定义两个端点：用于查询数据的 fetchPosts 和用于创建新帖子的 addPost。

步骤2：将API服务集成到Redux Store中

将 postsApi 减速器添加到存储并配置中间件以启用缓存和失效。

更新 store.js 以集成 postsApi:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import { postsApi } from '../features/posts/postsApi';

const store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
    [postsApi.reducerPath]: postsApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling, and other features of RTK Query
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(postsApi.middleware),
});

export default store;

登录后复制

3. 在组件中使用RTK查询

RTK 查询根据 API 服务中定义的端点生成自定义挂钩。这些钩子用于自动执行数据获取、突变和管理缓存。

第 1 步：使用 useFetchPostsQuery 获取数据

创建一个 PostsList.js 组件来获取并显示帖子列表。

// src/features/posts/PostsList.js
import React from 'react';
import { useFetchPostsQuery } from './postsApi';

const PostsList = () => {
  const { data: posts, error, isLoading } = useFetchPostsQuery();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>An error occurred: {error.message}</p>;

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

export default PostsList;

登录后复制

说明：

useFetchPostsQuery：RTK 查询为 fetchPosts 端点生成的自定义挂钩。它返回一个对象，其中包含获取的数据（data）、加载状态（isLoading）和错误状态（error）。
组件根据钩子输出有条件地呈现加载、错误或数据状态。

第 2 步：使用 useAddPostMutation 添加数据

创建一个 AddPostForm.js 组件以使用 addPost 突变添加新帖子。

// src/features/posts/AddPostForm.js
import React, { useState } from 'react';
import { useAddPostMutation } from './postsApi';

const AddPostForm = () => {
  const [addPost, { isLoading }] = useAddPostMutation();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (title && content) {
      await addPost({ title, body: content }).unwrap();
      setTitle('');
      setContent('');
    }
  };

  return (
    <section>
      <h2>Add a New Post</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Post Title"
        />
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Post Content"
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Adding...' : 'Add Post'}
        </button>
      </form>
    </section>
  );
};

export default AddPostForm;

登录后复制

说明：

useAddPostMutation：RTK 查询为 addPost 突变生成的自定义挂钩。它提供了一个函数（addPost）来触发突变和一个加载状态（isLoading）。
unwrap()：允许我们从突变中解开已解析或拒绝的有效负载，以处理请求后的副作用。

4. 处理缓存、错误和乐观更新

RTK Query 自动处理缓存、错误状态，并在发生突变时使缓存失效。您可以使用标签和其他配置进一步自定义行为。

第1步：使用providesTags和invalidatesTags

修改 postsApi 以使用标签进行缓存失效：

// src/features/posts/postsApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  tagTypes: ['Post'],
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
      providesTags: (result) =>
        result ? result.map(({ id }) => ({ type: 'Post', id })) : ['Post'],
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'],
    }),
  }),
});

export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

登录后复制

说明：