完整的 redux 工具包（部分 -

第三部分：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 id="Posts">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 id="Add-a-New-Post">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 ? 'Adding...' : 'Add Post'}
        </button>
      </textarea>
</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;

說明：

• ProvidesTags：用於標記從 fetchPosts 查詢取得的資料。它有助於在添加新資料時有效地使快取失效。
• invalidatesTags：這在 addPost 突變中使用，以使快取無效並重新獲取更新的資料。

5. 結論與後續步驟

在這一部分中，我們探索如何使用 RTK Query 來處理 Redux 應用程式中的資料擷取和快取。我們介紹了設定 API 服務、定義端點以及使用產生的掛鉤來查詢和變更資料。 RTK 查詢以最少的程式碼簡化了資料擷取和狀態管理，使其成為現代 Redux 應用程式的強大工具。

In the next part, we'll dive into Advanced Topics in RTK Query, such as customizing queries, using baseQuery, handling authentication, and optimizing performance.

Stay tuned for Part 4: Advanced Topics in RTK Query!

以上是完整的 redux 工具包（部分 -的詳細內容。更多資訊請關注PHP中文網其他相關文章！