完全な redux ツールキット (パート -

パート 3: RTK クエリの概要

このパートでは、RTK クエリについて説明します

1. RTK クエリとは何ですか?

Redux Toolkit は状態と非同期ロジックを管理するための強力なツールを提供しますが、データのフェッチとキャッシュを処理するには依然としてかなりの定型コードが必要です。 Redux Toolkit v1.6 で導入された RTK Query は、最小限のセットアップで効率的なデータのフェッチとキャッシュを行う強力なツールのセットを提供することで、この問題を解決することを目的としています。

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 スライスを生成し、ストア、リデューサー、アクションを自動的に管理します。
• BaseQuery: API のベース URL を定義する関数。 fetchBaseQuery は、標準フェッチ API の軽量ラッパーです。
• endpoints: API のエンドポイントを定義する関数。ここでは、データをクエリするための fetchPosts と、新しい投稿を作成するための addPost という 2 つのエンドポイントを定義します。

ステップ 2: API サービスを Redux ストアに統合する

postApi リデューサーをストアに追加し、キャッシュと無効化を有効にするミドルウェアを構成します。

postApi を統合するには、store.js を更新します:

// 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: fetchPosts エンドポイントの RTK クエリによって生成されるカスタム フック。取得したデータ (data)、読み込み状態 (isLoading)、エラー状態 (error) を含むオブジェクトを返します。
• コンポーネントは、フック出力に基づいて、読み込み、エラー、またはデータの状態を条件付きでレンダリングします。

ステップ 2: useAddPostMutation を使用してデータを追加する

addPost ミューテーションを使用して新しい投稿を追加するための AddPostForm.js コンポーネントを作成します。

// 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: addPost ミューテーション用の RTK クエリによって生成されるカスタム フック。ミューテーションと読み込み状態 (isLoading) をトリガーする関数 (addPost) を提供します。
• unwrap(): リクエスト後の副作用を処理するために、ミューテーションから解決または拒否されたペイロードをラップ解除できます。

4. キャッシュ、エラー、楽観的な更新の処理

RTK クエリは、キャッシュ、エラー状態を自動的に処理し、突然変異が発生した場合にはキャッシュを無効にします。タグやその他の構成を使用して動作をさらにカスタマイズできます。

ステップ 1:providesTags と validatesTags を使用する

キャッシュの無効化にタグを使用するように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;

説明:

• ProvideTags: これは、fetchPosts クエリからフェッチされたデータにタグを付けるために使用されます。新しいデータが追加されたときにキャッシュを効率的に無効にするのに役立ちます。
• validatesTags: これは、キャッシュを無効にし、更新されたデータを再フェッチするために addPost ミューテーションで使用されます。

5. 結論と次のステップ

このパートでは、RTK クエリを使用して Redux アプリケーションでデータのフェッチとキャッシュを処理する方法を検討しました。 API サービスのセットアップ、エンドポイントの定義、データのクエリと変更のための生成されたフックの使用について説明しました。 RTK クエリは、最小限のコードでデータの取得と状態管理を簡素化し、最新の Redux アプリケーションにとって強力なツールとなります。

Dans la partie suivante, nous aborderons les Sujets avancés dans les requêtes RTK, tels que la personnalisation des requêtes, l'utilisation de baseQuery, la gestion de l'authentification et l'optimisation des performances.

Restez à l'écoute pour la Partie 4 : Sujets avancés dans la requête RTK !

以上が完全な redux ツールキット (パート -の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。