React Academy · レッスン

createAsyncThunkによる非同期ロジック

createAsyncThunkとpending/fulfilled/rejectedのライフサイクルを使って、ReduxでAPI呼び出しを処理します。

「createAsyncThunkによる非同期ロジック」はCoddyKit上の無料React Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

はじめに

このレッスンでは、createAsyncThunkを使ってReduxでAPI呼び出しを処理し、スライス内でpending、fulfilled、rejectedのライフサイクルアクションを処理します。

createAsyncThunkとは

createAsyncThunkは、3つのライフサイクルアクション（pending（開始）、fulfilled（成功）、rejected（失敗））を自動的にディスパッチするthunkアクションクリエーターを生成します。それぞれをextraReducersで処理します。

Thunkの定義

型文字列と非同期のペイロードクリエーター関数を指定してcreateAsyncThunkを呼び出します。fulfilledのペイロードとして返したいデータをreturnします。

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId) => {
    const response = await fetch('/api/users/' + userId);
    return response.json(); // becomes action.payload on fulfilled
  }
);

extraReducersでの処理

スライスのextraReducersに、3つすべてのライフサイクル状態に対するケースを追加します。それに応じて、ローディング、データ、エラーの状態を管理します。

extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => {
      state.loading = true;
      state.error = null;
    })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    })
    .addCase(fetchUser.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    });
}

Thunkのディスパッチ

useDispatchを使ってコンポーネントからthunkをディスパッチします。引数はthunkアクションクリエーターに直接渡します。

const dispatch = useDispatch();
useEffect(() => {
  dispatch(fetchUser(userId));
}, [userId]);

Thunk内での状態へのアクセス

ペイロードクリエーターは、第2引数としてthunkAPIオブジェクトを受け取ります。thunkAPI.getState()で現在のRedux状態を読み取り、thunkAPI.dispatch()で他のアクションをディスパッチします。

export const saveItem = createAsyncThunk(
  'items/save',
  async (item, { getState }) => {
    const { auth } = getState();
    return fetch('/api/items', {
      method: 'POST',
      headers: { Authorization: 'Bearer ' + auth.token },
      body: JSON.stringify(item),
    }).then(r => r.json());
  }
);

rejectWithValueによるエラー処理

rejectedケースにカスタムエラーペイロードを渡すには、thunkAPI.rejectWithValue()を使用します。rejectedアクションのaction.payloadには、カスタムエラーオブジェクトが格納されます。

export const fetchData = createAsyncThunk(
  'data/fetch',
  async (id, { rejectWithValue }) => {
    const res = await fetch('/api/' + id);
    if (!res.ok) return rejectWithValue({ status: res.status });
    return res.json();
  }
);
// In rejected case: action.payload.status is available

Thunkのキャンセル

Thunk内のfetchにAbortControllerのsignalを渡します。dispatch.abort()でthunkがキャンセルされると、createAsyncThunkはthunkAPI.signalを自動的に提供します。

async (id, { signal }) => {
  const res = await fetch('/api/' + id, { signal });
  return res.json();
}

ディスパッチしたThunkの完了待ち

thunkのdispatch()はPromiseを返します。これをawaitして非同期処理の完了を確認できます。保存後にリダイレクトするパターンなどで便利です。

const result = await dispatch(saveItem(data));
if (saveItem.fulfilled.match(result)) {
  navigate('/success');
}

Builder記法とオブジェクト記法

extraReducersではbuilder.addCaseコールバックパターンを使用します。これは型安全で、現在もサポートされています。従来のオブジェクトキー記法は、最近のRTKバージョンでは非推奨です。

理解度チェック

createAsyncThunk内の非同期関数がエラーをスローすると、どうなりますか？

まとめ

createAsyncThunkはpending、fulfilled、rejectedアクションを自動的に生成します。3つすべてをextraReducersで処理します。カスタムエラーペイロードにはrejectWithValueを使用し、thunk内で現在の状態にアクセスするにはthunkAPI.getState()を使用します。

次のレッスン

次のレッスン：**RTK Query：エンドポイントと自動キャッシュ** — createApiでAPIエンドポイントを定義し、RTK Queryにキャッシュを自動管理させます。

よくある質問

「createAsyncThunkによる非同期ロジック」レッスンは無料ですか？

はい。「createAsyncThunkによる非同期ロジック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「createAsyncThunkによる非同期ロジック」で何を学びますか？

createAsyncThunkとpending/fulfilled/rejectedのライフサイクルを使って、ReduxでAPI呼び出しを処理します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「createAsyncThunkによる非同期ロジック」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る