redux toolkit メモ redux thunk 非同期処理について

参考にした記事

https://www.cyokodog.net/blog/redux-toolkit-async-thunk/

# createAsyncThunk

createAsyncThunk を使用しない場合は、非同期処理が完了した後にdispatch(sliceに定義されたaction)のようにしてdispatch()する構成になるため、storeに依存した実装となる

createAsyncThunk では、第一引数にActionType、第二引数にPayloadを生成する関数を指定するのみなので（payload を返すのみで dispatch はしない）、storeには依存しない構成となる

若干よくわからないのが async function の 関数の引数はひつようかというところ。とりあえずpayloadかえすだけならいらない？

処理の内容や再利用性によりけりか

export const loadTasks = createAsyncThunk(
 // 第一引数にActionType
 "todo/loadTasks",
 // 第二引数にpayload生成関数
 async (_args, _thunkApi) => {
   // fetchして戻ってきたpayloadを返す
   const tasks = await todoRepo.fetchTasks();
   return { tasks };
 }
);

とにかくこれでpending、fulfilled、rejectedの3つのアクションを生成してくれるので、呼び出し時にdispatchでよんであげればOK

こちらも参考になった。引数の扱いこれがわかりやすいのと、dispatchの扱いについても書かれている。（ただしslice使っていないので Action creator は別で定義している。この辺は実装変わってきそう）

https://qiita.com/puku0x/items/4217ca9f98fad82bc998