Reactで非同期処理を簡略化！Redux Toolkit Queryの活用術

非同期処理を伴うReactアプリケーションの開発は、多くの開発者にとって課題となることが少なくありません。状態管理の複雑化、キャッシュの管理、エラーハンドリングといった課題が、アプリケーションの拡張性や保守性に影響を与えることがあります。そこで注目されるのが、Redux Toolkit Query (RTK Query) です。RTK Queryは、Reduxの強力なエコシステムを利用しながら、非同期処理をシンプルかつ効率的に実装できる新しいツールです。本記事では、Redux Toolkit Queryの特徴と利点を解説し、実際にどのように活用するかを具体的な例を交えて説明します。Reactでの非同期処理をスムーズにし、開発体験を向上させる方法を一緒に学んでいきましょう。

Redux Toolkit Queryとは何か

Redux Toolkit Query (RTK Query) は、Redux Toolkitに含まれる非同期データ取得とキャッシュ管理のためのライブラリです。従来のReduxで非同期処理を扱う際には、ミドルウェアや複雑なロジックが必要でしたが、RTK Queryを使うことで、これらの処理が簡潔になります。

RTK Queryの特徴

RTK Queryは以下のような特徴を持っています：

非同期処理の簡素化：データの取得、キャッシュ、更新が最小限のコードで実装可能。
Reduxエコシステムとの統合：Reduxの状態管理と自然に連携。
キャッシュ機能：データのキャッシュや自動的な再フェッチをサポート。
拡張性：ミューテーションやポーリングといった高度な機能も備える。

RTK Queryの基本構造

RTK Queryは、主に次の2つの概念で構成されています：

APIスライス：データ取得やミューテーションを定義するための設定。
Reactフック：Reactコンポーネント内で簡単にAPIを呼び出すためのフック（例：useQuery、useMutation）。

RTK Queryの導入の利点

RTK Queryを導入することで、開発者は以下の利点を享受できます：

非同期処理のコード量を大幅に削減。
データのキャッシュや再利用が容易。
状態管理とデータ取得を統一的に扱える。

このように、RTK QueryはReactアプリケーションにおける非同期処理を革新的に改善するツールとして注目されています。

非同期処理が必要なシナリオ

Reactアプリケーションにおいて、非同期処理が必要となる場面は非常に多岐にわたります。以下に、典型的なシナリオをいくつか挙げ、具体例を交えて解説します。

外部APIからのデータ取得

非同期処理の最も一般的なケースが、外部APIからのデータ取得です。たとえば、次のような場面が挙げられます：

ニュースアプリ：最新の記事一覧をAPIから取得して表示する。
eコマースサイト：商品リストや在庫情報をリアルタイムで取得する。

具体例

“`javascript
fetch(‘https://api.example.com/products’)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(‘Error fetching products:’, error));

このようなコードは非同期処理の基本ですが、データ管理が煩雑になりがちです。  

<h3>フォームの送信とデータ送信</h3>  
ユーザーがフォームに入力したデータをサーバーに送信する場合も、非同期処理が必要です。例として、ユーザー登録フォームがあります。送信後にはレスポンスに基づいたUIの更新が求められます。  

<h3>リアルタイム更新の必要性</h3>  
チャットアプリや株価監視アプリなど、リアルタイムでデータを取得し続ける必要がある場合には、非同期処理が欠かせません。これには、ポーリングやWebSocketを利用した方法が用いられます。  

<h3>非同期処理を必要とする理由</h3>  
- **パフォーマンス向上**：非同期処理を適切に管理することで、UIをブロックせずにスムーズな操作感を提供できる。  
- **スケーラビリティ**：外部サービスとの連携を効率化し、アプリケーションの拡張性を高められる。  

これらのシナリオに対応するため、Redux Toolkit Queryは強力な選択肢となります。特に、データ取得の煩雑さを軽減し、キャッシュやエラーハンドリングを一元化する点で優れています。
<h2>Redux Toolkit Queryの基本構成</h2>  

Redux Toolkit Query (RTK Query) を使用するには、いくつかの基本的な構成ステップを理解しておく必要があります。これらのステップを通じて、RTK QueryをReactアプリケーションに統合し、効率的な非同期処理を実現します。  

<h3>1. Redux Toolkitのセットアップ</h3>  
RTK Queryを利用するためには、まずRedux Toolkitをインストールし、プロジェクトに統合します。  

<h4>必要なパッケージのインストール</h4>

bash
npm install @reduxjs/toolkit react-redux

<h4>ストアの作成</h4>  
RTK Queryを動作させるには、Reduxストアにミドルウェアを追加します。

javascript
import { configureStore } from ‘@reduxjs/toolkit’;
import { apiSlice } from ‘./features/api/apiSlice’;

const store = configureStore({
reducer: {
[apiSlice.reducerPath]: apiSlice.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(apiSlice.middleware),
});

export default store;

<h3>2. APIスライスの作成</h3>  
RTK Queryでは、APIスライスと呼ばれるモジュールを作成して、データ取得や操作を定義します。

javascript
import { createApi, fetchBaseQuery } from ‘@reduxjs/toolkit/query/react’;

export const apiSlice = createApi({
reducerPath: ‘api’,
baseQuery: fetchBaseQuery({ baseUrl: ‘/api’ }),
endpoints: (builder) => ({
getPosts: builder.query({
query: () => ‘/posts’,
}),
}),
});

export const { useGetPostsQuery } = apiSlice;

<h3>3. プロバイダーの設定</h3>  
Reactアプリケーション全体でストアを利用するために、`Provider`を設定します。

javascript
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { Provider } from ‘react-redux’;
import store from ‘./store’;
import App from ‘./App’;

ReactDOM.render(
,
document.getElementById(‘root’)
);

<h3>4. データ取得の準備</h3>  
ReactコンポーネントでAPIスライスを利用する準備が整いました。次は、コンポーネント内でデータを取得し、UIに反映する方法を解説します。  

この基本構成を理解することで、RTK Queryの導入がスムーズになり、非同期処理を簡略化できます。次の章では、具体的にどのようにデータを取得して利用するかを詳しく説明します。  
<h2>APIスライスの作成方法</h2>  

Redux Toolkit Query (RTK Query) の中核となるのがAPIスライスの作成です。このスライスは、APIリクエストの定義と非同期処理を簡略化する仕組みを提供します。ここでは、APIスライスを構築する手順を詳細に解説します。  

<h3>APIスライスとは</h3>  
APIスライスは、RTK Queryでデータ取得や操作を行うための設定モジュールです。以下の要素を定義します：  
- **APIのエンドポイント**：リクエストのターゲットURL。  
- **リクエスト方法**：データ取得 (`query`) やデータ操作 (`mutation`) の設定。  

<h3>1. APIスライスの基礎構築</h3>  
まず、`createApi`関数を使用してAPIスライスを作成します。

javascript
import { createApi, fetchBaseQuery } from ‘@reduxjs/toolkit/query/react’;

export const apiSlice = createApi({
reducerPath: ‘api’, // スライス名
baseQuery: fetchBaseQuery({ baseUrl: ‘https://jsonplaceholder.typicode.com’ }), // 基本のURL
endpoints: (builder) => ({}), // エンドポイントの定義を追加
});

<h3>2. エンドポイントの追加</h3>  
`endpoints`プロパティ内で、APIリクエストを構築します。以下は、投稿データを取得するクエリの例です。

javascript
export const apiSlice = createApi({
reducerPath: ‘api’,
baseQuery: fetchBaseQuery({ baseUrl: ‘https://jsonplaceholder.typicode.com’ }),
endpoints: (builder) => ({
getPosts: builder.query({
query: () => ‘/posts’, // リクエスト先のエンドポイント
}),
}),
});

export const { useGetPostsQuery } = apiSlice; // フックをエクスポート

<h3>3. ミューテーションの追加</h3>  
データの作成、更新、削除を行う場合には、`builder.mutation`を使用します。以下は、投稿データを作成するミューテーションの例です。

javascript
export const apiSlice = createApi({
reducerPath: ‘api’,
baseQuery: fetchBaseQuery({ baseUrl: ‘https://jsonplaceholder.typicode.com’ }),
endpoints: (builder) => ({
getPosts: builder.query({
query: () => ‘/posts’,
}),
addPost: builder.mutation({
query: (newPost) => ({
url: ‘/posts’,
method: ‘POST’,
body: newPost,
}),
}),
}),
});

export const { useGetPostsQuery, useAddPostMutation } = apiSlice; // フックをエクスポート

<h3>4. APIスライスの活用</h3>  
作成したAPIスライスは、Reduxストアに統合する必要があります。ストアの設定は以下の通りです：

javascript
import { configureStore } from ‘@reduxjs/toolkit’;
import { apiSlice } from ‘./apiSlice’;

const store = configureStore({
reducer: {
[apiSlice.reducerPath]: apiSlice.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(apiSlice.middleware),
});

export default store;

<h3>5. メンテナンスと拡張性</h3>  
複数のエンドポイントやAPIサービスを扱う場合、スライスを分割して管理することで、プロジェクトの拡張性を確保できます。また、型定義やエラーハンドリングを加えることで、より堅牢なコードを構築できます。  

APIスライスを適切に作成することで、RTK Queryを活用した効率的な非同期処理の実装が可能になります。次の章では、このスライスをReactコンポーネントでどのように利用するかを解説します。  
<h2>Reactコンポーネントでのデータフェッチ</h2>  

Redux Toolkit Query (RTK Query) を使うことで、Reactコンポーネント内でデータを簡単に取得し、効率的にレンダリングすることができます。この章では、APIスライスで定義したエンドポイントを利用して、データを取得する具体的な方法を説明します。  

<h3>1. フックのインポート</h3>  
APIスライスでエクスポートしたクエリフック（例：`useGetPostsQuery`）をReactコンポーネントでインポートします。

javascript
import React from ‘react’;
import { useGetPostsQuery } from ‘./features/api/apiSlice’;

<h3>2. クエリフックの使用</h3>  
クエリフックを利用して、データを取得します。このフックは、リクエストの状態（ローディング、エラー、データ取得完了）も提供します。

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

if (isLoading) {
return

Loading…;
}

if (error) {
return

Error fetching posts: {error.message};
}

return (

Posts

{post.title}

);
};

export default PostsList;

<h3>3. リクエスト状態の管理</h3>  
RTK Queryでは、以下のような状態を管理できます：  
- **isLoading**：リクエスト中であることを示します。  
- **error**：リクエスト失敗時のエラー情報を提供します。  
- **data**：成功時のレスポンスデータを返します。  

これにより、非同期処理に伴う状態管理が簡素化されます。  

<h3>4. パラメーター付きクエリ</h3>  
動的なリクエストを行う場合、クエリフックに引数を渡すことで、パラメーターを設定できます。

javascript
const PostDetails = ({ postId }) => {
const { data: post, error, isLoading } = useGetPostsQuery(postId);

if (isLoading) {
return

Loading post…;
}

if (error) {
return

Error loading post: {error.message};
}

return (

{post.title}

{post.body}
);
};

export default PostDetails;

<h3>5. ミューテーションの利用</h3>  
データの作成や更新を行う場合には、ミューテーションフックを利用します。

javascript
import React, { useState } from ‘react’;
import { useAddPostMutation } from ‘./features/api/apiSlice’;

const AddPost = () => {
const [addPost] = useAddPostMutation();
const [title, setTitle] = useState(”);
const [content, setContent] = useState(”);

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

return (
setTitle(e.target.value)} placeholder=”Title” /> setContent(e.target.value)} placeholder=”Content” /> <button type=”submit”>Add Post</button> </form><br /> );<br /> };</p> <p>export default AddPost;</p> <pre><code><h3>6. リクエスト結果のキャッシュ</h3> RTK Queryは、デフォルトでデータをキャッシュし、同じリクエストが再度発生した際にキャッシュを利用します。この機能により、パフォーマンスが向上します。 Reactコンポーネント内でのデータフェッチは、RTK Queryによって効率化され、非同期処理に伴う複雑さを軽減します。次の章では、キャッシュ機能をさらに深く掘り下げ、その利点を解説します。 <h2>キャッシュ機能の活用と利点</h2> Redux Toolkit Query (RTK Query) のキャッシュ機能は、非同期処理の効率化とパフォーマンス向上に大きく貢献します。この章では、キャッシュ機能の仕組みとその利点を解説し、実践でどのように活用できるかを具体例とともに紹介します。 <h3>1. キャッシュ機能の仕組み</h3> RTK Queryのキャッシュは、以下のような仕組みで動作します： – データ取得後に結果をキャッシュとして保存。 – 同じエンドポイントに対するリクエストが発生すると、キャッシュされたデータを優先的に返却。 – 一定時間が経過、またはデータが無効化された場合に再フェッチを実行。この仕組みにより、APIリクエストの回数を削減し、アプリケーション全体のパフォーマンスを向上させます。 <h3>2. キャッシュの自動管理</h3> RTK Queryは、キャッシュを自動的に管理します。たとえば、以下のコードでは取得した投稿データがキャッシュされます： </code></pre> <p>javascript <br /> const { data: posts } = useGetPostsQuery();</p> <pre><code>次回、同じ`useGetPostsQuery`が呼び出された際には、キャッシュされたデータが即座に利用され、APIリクエストをスキップします。 <h3>3. キャッシュの利点</h3> キャッシュを活用することで、以下のような利点があります： – **パフォーマンス向上**：不要なリクエストを回避し、APIサーバーへの負荷を軽減。 – **レスポンスタイム短縮**：キャッシュから即座にデータを取得し、ユーザーに素早く結果を表示。 – **一貫性の確保**：同じデータに対するリクエストで、最新の状態が一貫して提供される。 <h3>4. 再フェッチのトリガー</h3> データを最新の状態に保つために、キャッシュを無効化して再フェッチをトリガーする方法もあります。 </code></pre> <p>javascript <br /> const { refetch } = useGetPostsQuery();</p> <p>const handleRefresh = () => {<br /> refetch(); // キャッシュを無効化し、データを再取得<br /> };</p> <pre><code><h3>5. キャッシュの有効期限設定</h3> キャッシュの有効期限は`keepUnusedDataFor`オプションで設定できます。この値は秒単位で指定されます。 </code></pre> <p>javascript <br /> export const apiSlice = createApi({<br /> reducerPath: ‘api’,<br /> baseQuery: fetchBaseQuery({ baseUrl: ‘/api’ }),<br /> endpoints: (builder) => ({<br /> getPosts: builder.query({<br /> query: () => ‘/posts’,<br /> keepUnusedDataFor: 60, // キャッシュの有効期限を60秒に設定<br /> }),<br /> }),<br /> });</p> <pre><code><h3>6. キャッシュの無効化</h3> 特定の条件でキャッシュを無効化したい場合、無効化のためのメソッド`invalidateTags`を利用できます。 </code></pre> <p>javascript <br /> const { data: posts } = useGetPostsQuery(undefined, {<br /> refetchOnMountOrArgChange: true, // コンポーネントがマウントされるたびに再フェッチ<br /> });</p> <pre><code><h3>7. キャッシュのデバッグ</h3> 開発中にキャッシュの状態を確認したい場合、Redux DevToolsを利用すると、キャッシュされたデータや状態を視覚的に確認できます。キャッシュ機能を適切に利用することで、アプリケーションのパフォーマンスとユーザー体験が向上します。次の章では、エラー発生時の対応方法について具体的に解説します。 <h2>エラーハンドリングの実践例</h2> Redux Toolkit Query (RTK Query) を利用すると、非同期処理で発生するエラーの検出と対処が簡単になります。この章では、RTK Queryを使ったエラーハンドリングの仕組みと、その実践方法を具体例を交えて解説します。 <h3>1. エラーの基本構造</h3> RTK Queryでは、APIリクエストの結果としてエラー情報が自動的に提供されます。クエリフックやミューテーションフックを使用する際に、`error` プロパティでエラー内容を取得できます。 <h4>クエリフックでのエラーハンドリング</h4> 以下は、エラーを表示する基本的な例です： </code></pre> <p>javascript <br /> const { data, error, isLoading } = useGetPostsQuery();</p> <p>if (isLoading) return <p>Loading…</p>;<br /> if (error) return <p>Error occurred: {error.message}</p>;</p> <p>return (<br /> </p> <ul> {data.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> <p>);</p> <pre><code><h3>2. エラーオブジェクトの構造</h3> `error` オブジェクトには、エラーに関する詳細情報が含まれます： – **status**: HTTPステータスコード（例：404, 500）。 – **data**: サーバーからのエラーレスポンス（エラーメッセージなど）。 – **message**: クライアントサイドで発生したエラーメッセージ。 <h3>3. エラーハンドリングのカスタマイズ</h3> エラーメッセージの表示をより柔軟に制御することができます。 </code></pre> <p>javascript <br /> if (error) {<br /> if (error.status === 404) {<br /> return <p>Resource not found.</p>;<br /> }<br /> if (error.status === 500) {<br /> return <p>Internal server error. Please try again later.</p>;<br /> }<br /> return <p>Something went wrong: {error.message}</p>;<br /> }</p> <pre><code><h3>4. ミューテーションのエラーハンドリング</h3> ミューテーションでもエラーが発生した場合、同様に`error`を利用できます。 </code></pre> <p>javascript <br /> const [addPost, { error, isLoading }] = useAddPostMutation();</p> <p>const handleAddPost = async () => {<br /> try {<br /> await addPost({ title: ‘New Post’, body: ‘Content here’ }).unwrap();<br /> console.log(‘Post added successfully’);<br /> } catch (error) {<br /> console.error(‘Failed to add post:’, error);<br /> }<br /> };</p> <p>return (<br /> </p> <div> <button onClick={handleAddPost} disabled={isLoading}> Add Post </button> {error && <p>Error: {error.message}</p>} </div> <p>);</p> <pre><code><h3>5. グローバルエラーハンドリング</h3> RTK Queryでは、エラーハンドリングをグローバルに設定することも可能です。たとえば、`baseQuery`にエラーハンドリングロジックを組み込むことで、全てのリクエストに共通のエラー処理を適用できます。 </code></pre> <p>javascript <br /> const baseQuery = fetchBaseQuery({ baseUrl: ‘/api’ });</p> <p>const baseQueryWithReauth = async (args, api, extraOptions) => {<br /> let result = await baseQuery(args, api, extraOptions);<br /> if (result.error && result.error.status === 401) {<br /> // 再認証ロジック<br /> console.log(‘Authentication error’);<br /> }<br /> return result;<br /> };</p> <p>export const apiSlice = createApi({<br /> baseQuery: baseQueryWithReauth,<br /> endpoints: (builder) => ({}),<br /> });</p> <pre><code><h3>6. エラーに基づくUIの更新</h3> エラーが発生した際にUIの状態を動的に変更することで、ユーザー体験を向上させられます。 </code></pre> <p>javascript <br /> if (error) {<br /> return (<br /> <div> <p>We encountered an error.</p> <button onClick={() => refetch()}>Retry</button> </div><br /> );<br /> }</p> <pre><code><h3>7. ベストプラクティス</h3> – **ユーザーフレンドリーなメッセージ**: エラーメッセージをユーザーにわかりやすく表示。 – **リトライ機能**: エラー発生時にリトライオプションを提供。 – **詳細なログ**: 開発時にはエラー内容を詳しく記録し、原因の特定を容易にする。エラーハンドリングを適切に行うことで、アプリケーションの信頼性とユーザー体験が向上します。次の章では、ポーリングや再フェッチといった高度な機能について解説します。 <h2>高度な機能：ポーリングと再フェッチ</h2> Redux Toolkit Query (RTK Query) では、単なるデータ取得だけでなく、ポーリングや再フェッチといった高度な機能を利用することで、アプリケーションの動的なデータ更新を実現できます。この章では、それらの機能の概要と実装例を紹介します。 <h3>1. ポーリングとは</h3> ポーリングとは、一定の間隔でAPIリクエストを送信し、データを定期的に更新する手法です。リアルタイム性が求められるシナリオ（例：株価の更新、チャットメッセージの取得）において効果的です。 <h4>ポーリングの実装例</h4> RTK Queryでは、`pollingInterval`オプションを設定することでポーリングを有効にできます。 </code></pre> <p>javascript <br /> const { data, isLoading } = useGetPostsQuery(undefined, {<br /> pollingInterval: 3000, // 3秒ごとに再フェッチ<br /> });</p> <p>if (isLoading) {<br /> return <p>Loading…</p>;<br /> }</p> <p>return (<br /> </p> <ul> {data.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> <p>);</p> <pre><code>このコードでは、APIリクエストが3秒ごとに自動的に実行され、最新データが取得されます。 <h3>2. 再フェッチの活用</h3> ユーザー操作や特定の条件に応じて、データを再取得したい場合に再フェッチが役立ちます。再フェッチをトリガーするには、クエリフックの`refetch`メソッドを使用します。 <h4>再フェッチの実装例</h4> </code></pre> <p>javascript <br /> const { data, refetch } = useGetPostsQuery();</p> <p>const handleRefresh = () => {<br /> refetch(); // 手動で再フェッチをトリガー<br /> };</p> <p>return (<br /> </p> <div> <button onClick={handleRefresh}>Refresh Data</button> <ul> {data.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> </div> <p>);</p> <pre><code>この例では、「Refresh Data」ボタンをクリックすると、最新のデータが取得されます。 <h3>3. ポーリングと再フェッチの使い分け</h3> – **ポーリング**: 自動的にデータを更新したい場合に使用。 – 例: スコアボードやリアルタイム通知。 – **再フェッチ**: ユーザー操作や特定の条件下でのみデータを更新したい場合に使用。 – 例: 「更新」ボタンのクリック時や特定の条件が満たされた場合。 <h3>4. ポーリングの停止</h3> 特定の条件でポーリングを停止したい場合は、`pollingInterval`を`0`に設定します。 </code></pre> <p>javascript <br /> const { data, isLoading } = useGetPostsQuery(undefined, {<br /> pollingInterval: isRealTime ? 3000 : 0, // リアルタイムモードが有効な場合にのみポーリング<br /> });</p> <pre><code><h3>5. ベストプラクティス</h3> – **適切な間隔を設定**: ポーリング間隔が短すぎるとAPIサーバーへの負荷が増大するため、適切な間隔を設定する。 – **必要に応じた再フェッチ**: 必要なタイミングで再フェッチを使用し、過剰なリクエストを避ける。 – **条件付きポーリング**: 特定の状態に応じてポーリングをオン・オフする仕組みを構築する。ポーリングと再フェッチは、動的なデータ更新を実現するための強力なツールです。これらの機能を効果的に活用することで、アプリケーションの応答性とリアルタイム性を向上させることができます。次の章では、RTK Queryを使った実践的な演習課題を提示します。 <h2>実用的な演習：フルスタックアプリの構築</h2> Redux Toolkit Query (RTK Query) を活用して、簡単なフルスタックアプリケーションを構築する演習を通じて、その実践的な使い方を学びます。この演習では、Reactフロントエンドと仮想のバックエンドAPIを統合し、タスク管理アプリを作成します。 <h3>1. アプリの要件</h3> この演習では、以下の機能を持つアプリを作成します： – タスク一覧の表示。 – 新しいタスクの追加。 – タスクの削除。 – データの自動更新（ポーリング）。 <h3>2. APIエンドポイントの構成</h3> 以下の仮想APIエンドポイントを使用します： – `GET /tasks`：全タスクを取得。 – `POST /tasks`：新しいタスクを追加。 – `DELETE /tasks/:id`：指定したタスクを削除。 <h3>3. APIスライスの作成</h3> まず、APIスライスを構築します。 </code></pre> <p>javascript <br /> import { createApi, fetchBaseQuery } from ‘@reduxjs/toolkit/query/react’;</p> <p>export const tasksApi = createApi({<br /> reducerPath: ‘tasksApi’,<br /> baseQuery: fetchBaseQuery({ baseUrl: ‘https://example.com/api’ }),<br /> endpoints: (builder) => ({<br /> getTasks: builder.query({<br /> query: () => ‘/tasks’,<br /> pollingInterval: 5000, // 5秒ごとにデータを更新<br /> }),<br /> addTask: builder.mutation({<br /> query: (newTask) => ({<br /> url: ‘/tasks’,<br /> method: ‘POST’,<br /> body: newTask,<br /> }),<br /> }),<br /> deleteTask: builder.mutation({<br /> query: (id) => ({<br /> url: <code>/tasks/${id}</code>,<br /> method: ‘DELETE’,<br /> }),<br /> }),<br /> }),<br /> });</p> <p>export const { useGetTasksQuery, useAddTaskMutation, useDeleteTaskMutation } = tasksApi;</p> <pre><code><h3>4. タスク一覧の表示</h3> タスク一覧を表示するコンポーネントを作成します。 </code></pre> <p>javascript <br /> import React from ‘react’;<br /> import { useGetTasksQuery, useDeleteTaskMutation } from ‘./tasksApi’;</p> <p>const TaskList = () => {<br /> const { data: tasks, isLoading, error } = useGetTasksQuery();<br /> const [deleteTask] = useDeleteTaskMutation();</p> <p>if (isLoading) return <p>Loading tasks…</p>;<br /> if (error) return <p>Error: {error.message}</p>;</p> <p>return (<br /> <ul> {tasks.map((task) => ( <li key={task.id}> {task.name} <button onClick={() => deleteTask(task.id)}>Delete</button> </li> ))} </ul><br /> );<br /> };</p> <p>export default TaskList;</p> <pre><code><h3>5. 新しいタスクの追加</h3> 新しいタスクを追加するフォームを作成します。 </code></pre> <p>javascript <br /> import React, { useState } from ‘react’;<br /> import { useAddTaskMutation } from ‘./tasksApi’;</p> <p>const AddTaskForm = () => {<br /> const [addTask] = useAddTaskMutation();<br /> const [taskName, setTaskName] = useState(”);</p> <p>const handleSubmit = async (e) => {<br /> e.preventDefault();<br /> if (taskName.trim()) {<br /> await addTask({ name: taskName });<br /> setTaskName(”);<br /> }<br /> };</p> <p>return (<br /> <form onSubmit={handleSubmit}> <input type=”text” value={taskName} onChange={(e) => setTaskName(e.target.value)} placeholder=”New task” /> <button type=”submit”>Add Task</button> </form><br /> );<br /> };</p> <p>export default AddTaskForm;</p> <pre><code><h3>6. アプリの統合</h3> 作成したコンポーネントを統合して、アプリケーションを完成させます。 </code></pre> <p>javascript <br /> import React from ‘react’;<br /> import TaskList from ‘./TaskList’;<br /> import AddTaskForm from ‘./AddTaskForm’;</p> <p>const App = () => {<br /> return (<br /> <div> <h1>Task Manager</h1> <AddTaskForm /> <TaskList /> </div><br /> );<br /> };</p> <p>export default App;<br /> “` </p> <h3>7. 演習のポイント</h3> <ul> <li>データの取得や操作がReduxと統一されていることを確認してください。 </li> <li>ポーリングによるデータ更新がリアルタイムで動作するかをテストしてください。 </li> <li>エラーが発生した場合に適切なエラーハンドリングが行われるかを確認してください。 </li> </ul> <p>この演習を通じて、RTK Queryの基本から高度な機能まで実践的に学ぶことができます。次の章では、本記事のまとめを行います。 </p> <h2>まとめ</h2> <p>本記事では、Reactアプリケーションでの非同期処理を効率化するためのRedux Toolkit Query (RTK Query) の活用方法を解説しました。RTK Queryを導入することで、データ取得、キャッシュ管理、エラーハンドリングが簡素化され、アプリケーションの開発効率とパフォーマンスが向上します。 </p> <p>以下の主要なポイントを学びました： </p> <ul> <li>RTK Queryの概要と基本構成。 </li> <li>非同期処理が必要なシナリオとその解決方法。 </li> <li>キャッシュやポーリング、再フェッチといった高度な機能の活用。 </li> <li>実践的な演習を通じてのRTK Queryの理解。 </li> </ul> <p>RTK Queryは、複雑な非同期処理をシンプルかつ強力に管理できるツールです。この知識を活用して、Reactアプリケーション開発を次のレベルへ引き上げてください。</p>

Reactで非同期処理を簡略化！Redux Toolkit Queryの活用術

Redux Toolkit Queryとは何か

RTK Queryの特徴

RTK Queryの基本構造

RTK Queryの導入の利点

非同期処理が必要なシナリオ

外部APIからのデータ取得

具体例

Posts

{post.title}

コメント

コメントするコメントをキャンセル

Reactで非同期処理を簡略化！Redux Toolkit Queryの活用術

Redux Toolkit Queryとは何か

RTK Queryの特徴

RTK Queryの基本構造

RTK Queryの導入の利点

非同期処理が必要なシナリオ

外部APIからのデータ取得

具体例

Posts

{post.title}

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル