[解決] typescript error 'type' is declared here. (Argument of type 'AsyncThunkAction, Redux thunk action)
when you update package for react-redux v7 to v8, this error occure sometime.
even if this type pass compile ever, but now is error. so you want to fix it.
i will share it i found solve.
Argument of type 'AsyncThunkAction<void, boolean, AsyncThunkConfig<unknown>>' is not assignable to parameter of type 'AnyAction'.
Property 'type' is missing in type 'AsyncThunkAction<void, boolean, AsyncThunkConfig<unknown>>' but required in type 'AnyAction'.ts(2345)
index.d.ts(19, 3): 'type' is declared here.
you will have to recreate dispatch type as called useAppDispatch.
because react-redux provided useDispatch is not know where dispatch using thunk action.
check your type dispatch, and then re typed it.
const dispatch = ReactRedux.useDispatch() // this dispatch standard
React.useEffect(() => {
dispatch(HogeOperation.change(some)) // type error is here.
// 'type' is declared here. why!!!!
}, [some])
solved code
package.json
//
- "react-redux": "7.2.6",
+ "react-redux": "8.0.1",
component
use useAppDispatch in component
const dispatch = ReactRedux.useDispatch()
const dispatch = useAppDispatch()
store
// store
import { configureStore } from '@reduxjs/toolkit'
import * as ReduxToolkit from '@reduxjs/toolkit'
import * as Uuid from 'uuid'
import * as ApiClient from '@ui/network/APIClient'
import * as ApolloClient from '@ui/modules/apolloClient'
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import * as Redux from 'redux'
import thunk, { ThunkDispatch } from 'redux-thunk'
import * as Ui from './store/ui'
import * as Domains from './store/domains'
import * as Entities from './store/entities'
export type ExtraArgument = {
api: ApiClient.IAPIClient
generateId: () => string
}
const extraArgument: ExtraArgument = {
api: new ApiClient.APIClient(ApolloClient.client),
generateId: Uuid.v4
}
export type RootState = {
a-state: a.State
b-state: b.State
c-state: c.State
}
export const store = configureStore({
reducer: Redux.combineReducers<RootState>({
[a-state]: a.reducer,
[b-state]: b.reducer,
[c-state]: c.reducer
}),
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
immutableCheck: false,
serializableCheck: false,
thunk: { extraArgument }
}).concat(thunk),
devTools: process.env.NODE_ENV !== 'production'
})
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
type AppAction = ReturnType<typeof store.dispatch>
export type AppDispatch = ThunkDispatch<RootState, any, AppAction>
export const useAppDispatch = () => useDispatch<AppDispatch>()
export type AsyncThunkConfig<RejectValue = unknown> = {
state: RootState
dispatch: ReduxToolkit.Dispatch
extra: ExtraArgument
rejectValue: RejectValue
}