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 は別で定義している。この辺は実装変わってきそう)