React + Reduxにおけるdispatch時のエラー
概要
現在、TypeScript + React + Reduxを用いた開発を行っています。
仮のログアウト機能を実装中にエラーが発生しました。
具体的には、actionをdispatchした際にエラーが発生します。
どうやら下記のjwtLogout内のdispatchで発生している様です。
自分なりに色々調べてみましたが, connect等を用いた解決方法は見つかれど、Hooksを用いた解決方法が中々見つからず、今回は質問させて頂きました。
どなたか解決方法のご教授お願いいたします。
エラーの内容
TypeError: dispatch is not a function
該当のコード
// reducer
import * as actionTypes from '../utils/actionTypes'
import * as actions from '../actions'
type Actions = (
| ReturnType<typeof actions.startRequest>
| ReturnType<typeof actions.completeRequest>
)
interface iState {
isRequesting: boolean
}
const initialState: iState = {
isRequesting: false,
}
const RequestReducer = (state: iState = initialState, action: Actions) => {
switch (action.type) {
case actionTypes.START_REQUEST:
return {
...state,
isRequesting: true
}
case actionTypes.COMPLETE_REQUEST:
return {
...state,
isRequesting: false
}
}
return state
}
export default RequestReducer
// actions
import { Dispatch } from "react"
import { Action } from "redux"
import * as actionTypes from "../utils/actionTypes"
export interface Actions {
type: String;
payload: any;
}
略 。。。
export const jwtLogout = () => {
return async (dispatch: Dispatch<Action>) => {
// TODO: gRpcログアウト && try-catch
dispatch({ type: actionTypes.START_REQUEST })
console.log('Logout')
localStorage.removeItem('token')
dispatch({ type: actionTypes.COMPLETE_REQUEST })
dispatch({ type: actionTypes.UNAUTHENTICATE_USER })
dispatch(setNotification('success', 'ログアウト成功!'))
}
}