Reduxで非同期の場合のSliceの作り方は下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'; import axios from 'axios'; // Sliceの外でフェッチするメソッドは記述するように推奨されている。 export const fetchAsyncGet = createAsyncThunk('fetch/get', async () => { const res = await axios.get('APIのエンドポイントURL'); return res.data; }); const fetchSlice = createSlice({ name: 'fetch', initialState: { tasks: [] }, reducers: {}, extraReducers: (builder) => { builder.addCase(fetchAsyncGet.fulfilled, (state, action) => { return { ...state, tasks: action.payload, }; }); }, }); export const selectTasks = (state) => state.fetch.tasks; export default fetchSlice.reducer; |
createAsyncThunk
従来のreduxだとredux-thunkなどのミドルウェアで行っていた物がRedux Tool Kit標準機能でまかなえるようになりました。
なお、Sliceの外にメソッドを記述することが推奨されています。
|
1 |
createAsyncThunk('アクションの名前',非同期関数) |
引数
| 引数 | 説明 |
|---|---|
| アクションの名前 | 「スライスの名前/メソッド名」(fetch/postなど)という命名規則がよく使われます。 |
| 非同期関数 | async/awaitなどで非同期の関数を指定します。 |
戻り値
3つのステータスのどれかを返してくれます。
| ステータス | 説明 |
|---|---|
|
pending
|
処理中 |
| fulfilled | 正常終了したことを示します。 |
| rejected | 異常終了 |
extraReducers
非同期関数を扱う場合は、通常のreducersではなくextraReducersというものを使います。
|
1 2 3 |
extraReducers: (builder) => { builder.addCase(アクション：createAsyncThunkで定義したメソッド.createAsyncThunkのステータス, reducerの処理); }, |
builder.addCase
createAsyncThunkで定義したメソッドのステータスによって処理させたい処理内容を記述します。
action.payload
非同期処理の場合は、createAsyncThunkで定義したメソッドのreturnした値がaction.payloadに入ります。
builderオブジェクトとは？
actionごとのreducerを生成する仕組み。基本的に、プログラミング言語のcase文と似たような感じのメソッドが用意されています。
メソッド
ちなみに、必ず「addCase → addMatcher → addDefaultCase」の順に記述しなければならないので注意しましょう。
addCase
特定のaction typeのreducerを実装する際に使います。
第一引数
action type文字列 または createActionで生成されたaction Creator。
第二引数
第一引数のactionに対するreducer関数
addMatcher
ある条件に該当するaction typeのreducerを実装する際に使います。（例えば、xxxという文字列を含むaction typeのみ実行するなど）
第一引数
matcher関数
第二引数
第一引数のactionに対するreducer関数
addDefaultCase
addCaseでもaddMatcherにも該当しなかったaction typeのReducerを実装する際に使います。
この記事へのコメントはありません。