ウェブサイト検索

Redux Toolkit クエリを使用して React でデータをフェッチする方法

Redux Toolkit Query は、データ管理作業の多くの負担を軽減します。その方法を発見してください。

React は、Web アプリケーションのユーザー インターフェイスを構築するための人気のある JavaScript ライブラリです。アプリケーションを構築するときは、ユーザーの操作に応じてブラウザーでデータを適切にフェッチおよびレンダリングできるようにするための効率的なデータ管理アプローチを検討することが重要です。

ただし、特に複数のソースからデータを取得し、多数の状態を一貫して更新する必要がある場合、このプロセスの管理は面倒でエラーが発生しやすいタスクになる可能性があります。このような場合、Redux Toolkit Query は効率的なソリューションを提供します。

Redux ツールキット クエリとは何ですか?

Redux Toolkit Query (RTK Query) は、Redux Toolkit 上に構築されたデータ取得ツールです。公式ドキュメントでは、RTK Query について「Web アプリケーションにデータをロードする一般的なケースを簡素化し、データのフェッチとキャッシュのロジックを自分で手書きする必要をなくすように設計された強力なデータのフェッチおよびキャッシュ ツール」と説明しています。

基本的に、React アプリケーションの API またはその他のデータ ソースからデータを取得して管理するプロセスを合理化する一連の機能と機能を提供します。

Redux Toolkit Query と React Query には類似点がありますが、Redux Toolkit Query の主な利点の 1 つは、状態管理ライブラリである Redux とのシームレスな統合であり、一緒に使用すると、React アプリケーションの完全なデータ取得および状態管理ソリューションが可能になります。

RTK の中核機能には、データ キャッシュ、クエリ管理機能、エラー処理などがあります。

React アプリケーションで Redux Toolkit クエリを開始する

まず、Create React App コマンドを使用して、React プロジェクトをローカルで簡単に起動できます。

mkdir React-RTQ
cd React-RTQ
npx create-react-app react-rtq-example
cd react-rtq-example 
npm start

あるいは、Web アプリケーション用の新しいビルド ツールおよび開発サーバーである Vite を使用して React プロジェクトをセットアップすることもできます。

このプロジェクトのコードは、この GitHub リポジトリにあります。

必要な依存関係をインストールする

React プロジェクトを立ち上げて実行したら、次のパッケージをインストールしてください。

npm install @reduxjs/toolkit react-redux

API スライスを定義する

API スライスは、指定された API エンドポイントとの統合および対話に必要な Redux ロジックを含むコンポーネントです。これは、データをフェッチするためのクエリ エンドポイントとデータを変更するためのミューテーション エンドポイントの両方を定義する標準化された方法を提供します。

基本的に、API スライスを使用すると、特定のソースからのデータをリクエストおよび変更するためのエンドポイントを定義でき、API と統合するための合理化されたアプローチが提供されます。

src ディレクトリに新しいフォルダーを作成し、 features という名前を付けます。このフォルダー内に新しいファイル apiSlice.js を作成し、以下のコードを追加します。

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const productsApi = createApi({
  reducerPath: "productsAp",
  baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/" }),
  endpoints: (builder) => ({
    getAllProducts: builder.query({
      query: () => "products",
    }),
    getProduct: builder.query({
      query: (product) => `products/search?q=${product}`, 
    }),
  }),
});
export const { useGetAllProductsQuery , useGetProductQuery } = productsApi;

このコードは、Redux Toolkit の createApi 関数を使用して、productsApi という API スライスを定義します。 API スライスは次のプロパティを受け取ります。

  • reducerPath プロパティ - Redux ストア内のレデューサーの名前を設定します。
  • baseQuery プロパティ - Redux Toolkit が提供するfetchBaseQuery 関数を使用して、すべての API リクエストのベース URL を指定します。
  • API エンドポイント -ビルダーオブジェクトを使用して、この API スライスで使用可能なエンドポイントを指定します。この場合、コードは 2 つのエンドポイントを定義します。

最後に、2 つのエンドポイントを識別する productsAPI オブジェクトから 2 つのフックが生成されます。これらのフックをさまざまな React コンポーネントで使用して、API リクエストを作成し、データを取得し、ユーザーの操作に応じて状態を変更できます。

このアプローチにより、React アプリケーションでの状態管理とデータの取得が合理化されます。

Reduxストアを構成する

API からデータを取得した後、RTK Query はデータを Redux ストアにキャッシュします。この場合、ストアは、React アプリケーションから行われた API リクエストの状態を管理するための中央ハブとして機能します。これには、API リクエストから取得したデータも含まれ、コンポーネントが必要に応じてこのデータにアクセスして更新できるようにします。

src ディレクトリにstore.js ファイルを作成し、次のコード行を追加します。

import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "./features/apiSlice";
export const store = configureStore({
  reducer: {
   [productsApi.reducerPath]: productsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
   getDefaultMiddleware().concat(productsApi.middleware),
});

このコードは、次の 2 つの主要な構成要素を含む新しい Redux ストアを作成します。

  1. Reducer: これは、ストアが状態の更新をどのように処理するかを定義します。この場合、productsApi.reducer がリデューサー関数として渡され、ストア全体の状態内でそれを識別するための一意のリデューサーパス キーが与えられます。
  2. ミドルウェア: ストアに適用する追加のミドルウェアを定義します。

結果として得られるストア オブジェクトは、完全に構成された Redux ストアであり、アプリケーションの状態を管理するために使用できます。

この方法でストアを構成すると、アプリケーションは API リクエストの状態を簡単に管理し、Redux Toolkit を使用して標準化された方法で結果を処理できます。

RTK 機能を実装するコンポーネントを作成する

src ディレクトリに、新しいファイル Data.js を含む新しいコンポーネント フォルダを作成します。

このコードを Data.js ファイルに追加します。

import { useGetAllProductsQuery } from "../features/apiSlice";
import React, { useState } from "react";
import "./product.component.css";
export const Data = () => {
  const { data, error, isLoading, refetch } = useGetAllProductsQuery();
  const [productsData, setProductsData] = useState([]);
  const handleDisplayData = () => {
    refetch();
    setProductsData(data?.products);
  };
  return (
    <div className="product-container">
      <button className="product-button" onClick={handleDisplayData}>
        Display Data
      </button>
      {isLoading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
      <label className="product-label">Products:</label>
      {productsData && productsData.length > 0 && (
        <ul>
          {productsData.slice(0, 4).map((product) => (
            <li className="product-details" key={product.id}>
              <p>Name: {product.title}</p>
              <p>Description: {product.description}</p>
              <p>Price: {product.price}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

このコードは、API スライスによって提供される useGetAllProductsQuery フックを使用して、指定された API エンドポイントからデータを取得する React コンポーネントを示しています。

ユーザーが [データの表示] ボタンをクリックすると、handleDisplayData 関数が実行され、製品データを取得するために HTTP リクエストが API に送信されます。応答が受信されると、製品のデータ変数が応答データで更新されます。最後に、コンポーネントは製品の詳細のリストを表示します。

アプリコンポーネントを更新する

App.js ファイルのコードに次の変更を加えます。

import "./App.css";
import { Data } from "./components/Data";
import { store } from "./store";
import { Provider } from "react-redux";
import { ApiProvider } from "@reduxjs/toolkit/query/react";
import { productsApi } from "./features/apiSlice";
function App() {
  return (
    <Provider store={store}>
      <ApiProvider api={productsApi}>
        <div className="App">
          <Data />
        </div>
      </ApiProvider>
    </Provider>
  );
}
export default App;

このコードは、Data コンポーネントを 2 つのプロバイダーでラップします。これら 2 つのプロバイダーは、コンポーネントに Redux ストアと RTK クエリ機能へのアクセスを許可し、API からデータをフェッチして表示できるようにします。

Web アプリケーションでの Redux Toolkit クエリの使用

Redux Toolkit Query を構成して、最小限のコードで指定されたソースからデータを効率的に取得するのは簡単です。さらに、API スライス コンポーネントでミューテーション エンドポイントを定義することで、保存されたデータを変更する関数を組み込むこともできます。

Redux の機能と RTK のデータ取得機能を組み合わせることで、React Web アプリケーションの包括的な状態管理ソリューションを取得できます。

関連記事: