When react-redux@8 is installed, type is not normally found in dispatch.

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: 17.0.2
• ReactDOM/React Native: 17.0.2 / 0.68.1
• Redux: 4.2.0
• React Redux: 8.0.1

What is the current behavior?

TS2345: Argument of type ‘AsyncThunkAction<TicketEntity[], void, {}>’ is not assignable to parameter of type ‘AnyAction’. Property ‘type’ is missing in type ‘AsyncThunkAction<TicketEntity[], void, {}>’ but required in type ‘AnyAction’.

const dispatch = useDispatch();
...
useEffect(()=>{
  dispatch(anyAction()) ; // error
},[dispatch])


### What is the expected behavior?

dispatch type changed before version

// v7
const dispatch: Dispatch
<AsyncThunkAction<ILoadNoticeListReturn, boolean | QueryDocumentSnapshot<INotice> | undefined, {}>>(action: AsyncThunkAction<...>) => AsyncThunkAction<...>

// v8
const dispatch: Dispatch
<AnyAction>(action: AnyAction) => AnyAction

### Which browser and OS are affected by this issue?

_No response_

### Did this work in previous versions of React Redux?

- [X] Yes

[Kir93]

@phryneas oh! Thank you for the reply. Hope you have a nice day 😃

[phryneas]

This was actually a bug in the past. since the default dispatch type does not take the redux-thunk middleware into consideration and so always returned a wrong return value from the dispatch call. In short, it was possible to dispatch anything that was not a valid action.

To have redux-thunk’s typings for a store with thunk, you need to set up correctly typed hooks:

// store.ts

import { configureStore } from '@reduxjs/toolkit'
// ...

const store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer,
    users: usersReducer
  }
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch


// hooks.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector