🔖

【redux toolkit】 createAsyncThunk内で異なるactionをdispatchする方法

2022/01/24に公開約1,100字

はじめに

redux toolkit を使って非同期処理をしたい場合に createAsyncThunk が使えますが、他の action を dispatch したい時にどうするか悩んだので書き記しておきます。

https://redux-toolkit.js.org/api/createAsyncThunk

https://redux-toolkit.js.org/rtk-query/overview

結論

createAsyncThunk 関数の第二引数に thunkAPI を定義し、thunkAPI.dispatch(ACTION)とすることで他アクションを dispatch できます。

export const updateItem = createAsyncThunk(
  'item/update',
  async (
    item: Item,
    thunkAPI,   // 👈 here
  ) => {
    try {
      await update(item)
      thunkAPI.dispatch(otherActions.notify("updated"))
    } catch (e) {
      throw e
    }
  },
)

thunk API とは

an object containing all of the parameters that are normally passed to a Redux thunk > function, as well as additional options

と公式には書いてあり、Redux の基本的なフローであるdispatchgetStateの他に、signalrejectWithValuefulfillWithValueといった redux toolkit 特有のフロー制御をメソッドとして呼ぶことができるようです。

詳しくはこちらをご覧ください。

まとめ

以上、createAsyncThunk 内で他の action を dispatch する方法でした!

どなたかのお役に立てれば幸いです 🙌

GitHubで編集を提案

Discussion

ログインするとコメントできます