typescriptでuseDispatchでRedux Thunkのthenが型エラーになる時の対応

typescriptでuseDispatchでRedux Thunkのthenが型エラーになる時の対応

LINEで送る
Pocket

APIが成功を返した時にリダイレクトするなどの処理に必要なのでdispatchをthenで繋ぎたいです。

下記のような書き方だとdispatchで型エラーが出ます。

 

非同期のaction

export const fetchData = () => async (dispatch: Dispatch) => {
  return apiFetchData().then((res) => {
    return dispatch({
      type: "FETCH_DATA_SUCCESS",
      payload: res
    })
  }).catch(() => {
    return dispatch({
    type: "FETCU_DATA_FAILURE"
  })
})
}

 

解決方法

useDispatchに型をつける

useDispatchの型引数にThunkDispatchを渡すと解決します。

type MyDispatch = ThunkDispatch<AppState, void, AnyAction>;

 

あとは型引数に当てるだけです。

const dispatch = useDispatch<MyDispatch>()

これで型エラーは解決します。

 

LINEで送る
Pocket

フロントエンド開発でお困りのことはありませんか?

フロントエンドの開発支援を行っています。

・Reactの開発をお願いしたい

・コーディング作業を依頼したい

・javascriptライブラリを作って欲しい。

上記以外にも何かありましたらお気軽にお問い合わせください。

コメントを残す