1.3.0から利用できる非同期処理用の機能です。Thunk(ThunkAction)を利用したReduxの非同期処理の実装方法について紹介しました。今回はcreateAsyncThunkを利用した非同期処理の実装方法について紹介をします。createAsyncThunkのライフサイクルを理解するにはPromiseの理解が必須です。Promiseの概要についてはJavaScriptの非同期処理で理解必須!Promiseの概要・挙動まとめで紹介をしているので、そちらもあわせてご覧になってください。JavaScriptの非同期処理で理解必須!Promiseの概要・挙動まとめ2021年8月7日reduxjs/toolkitは1.5.0を利用しています。今回紹介するサンプルコードはnishina555/reduxtoolkit-thunk-todoappに公開しております。参考記事createAsyncThunkについてcreateAsyncThunkとは非同期処理の実行状況に応じたActionCreatorを生成する関数です。createAsyncThunkは2つのパラメータを持ちます。第1引数はtypePrefixと呼ばれる文字列です。typePrefixはActionTypeの接頭辞として利用されます。第2引数はpayloadCreatorと呼ばれるasync関数(Promiseを返す非同期処理の関数)です。createAsyncThunkはasync関数で処理されるPromiseの状態に応じたActionCreatorを返します。createAsyncThunkに関する戻り値createAsyncThunkによって作成されるActionCreator、およびActionCreatorがdispatchするActionオブジェクトの値について紹介します。Value』をご覧になってください。createAsyncThunkが返すActionCreatorについてPromiseオブジェクトは以下の3種類の状態を持ちます。Promiseオブジェクトが持つ状態pending(保留)fulfilled(成功)rejected(失敗)createAsyncThunkのメソッド名がfetchAllTodosだった場合、Promiseオブジェクトの状態に応じて以下のActionCreatorが返されます。‘fetchAllTodos.rejected’createAsyncThunkによって作成されたActionCreatorがdispatchするActionについてたとえばtodos/fetchAllTodosというtypePrefixの場合、ActionCreatorによって作成されるActionTypeは以下の通りです。‘todos/fetchAllTodos/rejected’ActionのpayloadはpayloadCreatorの結果にもとづき決定されます。async関数でPromiseオブジェクトがresoloveした場合(任意の値がreturnされた場合)、fulfilledなActionTypeが作成されます。async関数の戻り値はaction.payloadに保存されます。ascyn関数でrejectWithValue(value)がreturnされた場合、rejectedなActionTypeが作成さます。rejectWithValueはaction.payloadに保存されます。async関数でPromiseオブジェクトがrejectされた場合、rejectedなActionTypeが作成されます。エラー内容はaction.errorに保存されます。createAsyncThunkの利用方法についてcreateAsyncThunkはあくまでActionCreatorを返すだけですので、ActionCreatorに対応したReducerを別途実装する必要があります。createAsyncThunkで作成されるActionCreatorに対応するReducerはcreateSliceのextraReducerで定義します。非同期処理が正常に終了した場合(Promiseオブジェクトがresolveされた場合)のReducerは以下のように実装します。todosSlice.reducer;createAsyncThunkでは非同期処理のステータスに応じたAdctionCreatorが生成されます。そのため、createAsyncThunkを利用することで非同期処理のステータスに応じたActionのdispatchが簡単に実装できます。各パラメータの意味は以下の通りです。thunkAPIの型thunkAPIとはThunk関数でReduxの情報を利用できるようにするオブジェクトです。1Thunk関数でReduxのStateやDispatchを利用する場合にthunkAPIを利用します。rejectValue?}の指定が可能です。2型定義をしたcreateAsyncThunkの具体例は以下の通りです。Toolkitで提供されている非同期処理のためのAPIcreateAsyncThunkは非同期処理の状態に応じたActionCreatorを返すcreateAsyncThunkのReducerはcreateSliceのextraReducersで実装するcreateAsynThunkを利用したTodoアプリのサンプルコードはnishina555/reduxtoolkit-thunk-todoappに公開しました。以下のような画面のTodoアプリとなっています。Twitter(@nishina555)やってます。↩RECOMMENDJavaScriptReactツイートシェアはてブ2送るPocket5プロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。