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

パート 4: RTK クエリの高度なトピック。

このパートでは、クエリのカスタマイズ、認証の処理、楽観的更新、パフォーマンスの最適化など、RTK クエリの高度な機能とユースケースに焦点を当てます。

パート 4: RTK クエリの高度なトピック

1. 高度な RTK クエリの概念の概要

前のパートでは、RTK クエリを使用してデータのフェッチと変更を行う基本について説明しました。次に、RTK クエリをさらに強力にする、より高度な機能について詳しく説明します。これらの機能により、クエリのカスタマイズ、認証の管理、パフォーマンスの最適化、楽観的な更新の処理が可能になり、よりスムーズなユーザー エクスペリエンスを実現します。

2. 認証用のbaseQueryのカスタマイズ

認証が必要な API を使用する場合は、JWT トークンや API キーなどの認証ヘッダーを含めるように BaseQuery をカスタマイズする必要があります。

ステップ 1: カスタム BaseQuery を作成する

すべてのリクエストに認証ヘッダーを追加するカスタムの BaseQuery 関数を作成できます。

// src/app/customBaseQuery.js
import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const customBaseQuery = fetchBaseQuery({
  baseUrl: 'https://jsonplaceholder.typicode.com/',
  prepareHeaders: (headers, { getState }) => {
    const token = getState().auth.token; // Assuming auth slice has token
    if (token) {
      headers.set('Authorization', `Bearer ${token}`);
    }
    return headers;
  },
});

export default customBaseQuery;

説明:

• prepareHeaders: この関数を使用すると、各リクエストのヘッダーをカスタマイズできます。 Redux ストアからトークンを取得し、それを Authorization ヘッダーに添付します。

ステップ2: createApiでカスタムbaseQueryを使用する

カスタムのbaseQueryを使用するようにpostsApi.jsファイルを変更します:

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

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: customBaseQuery, // Use the custom base query here
  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;

3. RTK クエリによる楽観的な更新

オプティミスティック更新により、サーバーが変更を確認する前に UI を即座に更新できるため、よりスムーズなユーザー エクスペリエンスが提供されます。サーバーがエラーを返した場合、UI は前の状態に戻ることができます。

ステップ 1: ミューテーションに楽観的な更新を実装する

RTK Query が提供する onQueryStarted ライフサイクル メソッドを使用して、オプティミスティックな更新を実装できます。

// src/features/posts/postsApi.js
addPost: builder.mutation({
  query: (newPost) => ({
    url: 'posts',
    method: 'POST',
    body: newPost,
  }),
  invalidatesTags: ['Post'],
  onQueryStarted: async (newPost, { dispatch, queryFulfilled }) => {
    // Optimistic update: immediately add the new post to the cache
    const patchResult = dispatch(
      postsApi.util.updateQueryData('fetchPosts', undefined, (draftPosts) => {
        draftPosts.push({ id: Date.now(), ...newPost }); // Fake ID for optimistic update
      })
    );
    try {
      await queryFulfilled; // Await server response
    } catch {
      patchResult.undo(); // Revert if the mutation fails
    }
  },
}),

説明:

• onQueryStarted: このライフサイクル メソッドは、ミューテーションの開始時にトリガーされます。キャッシュの更新を管理するために、dispatch パラメーターと queryFulfilled パラメーターが提供されます。
• PostsApi.util.updateQueryData: このユーティリティ関数を使用すると、キャッシュされたデータを楽観的に更新できます。
• patchResult.undo(): サーバーがエラーを返した場合、オプティミスティック更新を元に戻します。

4. 依存クエリの処理

場合によっては、あるクエリが別のクエリの結果に依存する、依存クエリの実行が必要になることがあります。 RTK クエリは、クエリの実行時期を制御するスキップ パラメーターを提供します。

例: 選択した投稿 ID に基づいて投稿の詳細を取得する

// src/features/posts/PostDetails.js
import React from 'react';
import { useFetchPostQuery } from './postsApi';

const PostDetails = ({ postId }) => {
  const { data: post, error, isLoading } = useFetchPostQuery(postId, { skip: !postId });

  if (!postId) return <p>Select a post to view details.</p>;
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading post details.</p>;

  return (
    <div>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </div>
  );
};

export default PostDetails;

説明:

• useFetchPostQuery: postId を引数として受け取るクエリ フック。 postId が指定されていない場合、クエリは { Skip: !postId } を使用してスキップされます。

5. RTK クエリによるポーリングとリアルタイム データ

RTK クエリは、指定された間隔でデータを最新の状態に保つためのポーリングをサポートしています。これは、リアルタイムのデータ同期に役立ちます。

ステップ 1: クエリでポーリングを使用する

pollingInterval オプションを使用して、任意のクエリのポーリングを有効にできます。

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

const PostsList = () => {
  const { data: posts, error, isLoading } = useFetchPostsQuery(undefined, {
    pollingInterval: 30000, // Poll every 30 seconds
  });

  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;

説明:

• pollingInterval: このオプションは、クエリがサーバーに新しいデータをポーリングする間隔 (ミリ秒単位) を指定します。

6. selectFromResult によるパフォーマンスの最適化

RTK クエリには、クエリ結果から特定のデータを選択できるようにすることで、高度なパフォーマンスの最適化のための selectFromResult オプションが用意されています。

ステップ 1: selectFromResult を使用して再レンダリングを最適化する

selectFromResult オプションを使用すると、クエリ結果のサブセットのみが必要な場合に不必要な再レンダリングを防ぐことができます。

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

const PostTitleList = () => {
  const { data: posts } = useFetchPostsQuery(undefined, {
    selectFromResult: ({ data }) => ({ titles: data?.map((post) => post.title) }),
  });

  return (
    <section>
      <h2>Post Titles</h2>
      <ul>
        {posts?.map((title, index) => (
          <li key={index}>{title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostTitleList;

説明:

• selectFromResult: このオプションを使用すると、取得した投稿からタイトルのみを選択でき、クエリ結果の他のデータが変更された場合に不要な再レンダリングを防ぐことができます。

7. 結論と次のステップ

このパートでは、認証のための BaseQuery のカスタマイズ、オプティミスティック更新の処理、依存クエリの管理、リアルタイム データ同期のためのポーリングの使用、selectFromResult によるパフォーマンスの最適化など、RTK クエリの高度なトピックについて説明しました。 RTK クエリの豊富な機能セットにより、最新の Redux アプリケーションでデータのフェッチとキャッシュを処理するための強力なツールになります。

次のパートでは、Redux Toolkit と RTK クエリのテスト戦略について説明し、単体テスト、統合テスト、堅牢で保守可能なコードを確保するためのベスト プラクティスについて説明します。

パート 5: Redux ツールキットと RTK クエリのテスト戦略 をお楽しみに!

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