FWIW, I believe the reason this is coming up as an issue with react-redux v8 is because the v7 useDispatch() was typed as:

// NOTE: the first overload below and note above can be removed if redux-thunk typings add an overload for
// the Dispatch function (see also this PR: https://github.com/reduxjs/redux-thunk/pull/247)
export function useDispatch<TDispatch = Dispatch<any>>(): TDispatch;
export function useDispatch<A extends Action = AnyAction>(): Dispatch<A>;

The first function overload means you can dispatch literally anything (as a workaround for redux-thunk).

But in v8 it’s now typed as:

export declare const useDispatch: <AppDispatch extends Dispatch<AnyAction> = Dispatch<AnyAction>>() => AppDispatch;

which only allows for Action objects.

So this issue isn’t “new” it’s just been masked by the loose types in the old react-redux type definitions.

That’s just background for why this is coming up now. If you’re hitting this error now as a user you should either:

• Use Redux Toolkit and define typed hooks (which will be correctly typed and allow thunk actions)
• If you’re using vanilla Redux, most bundlers won’t like import 'redux-thunk/extend-redux' in a regular TypeScript file because they think you’re trying to import JavaScript so you can either:
  • Use import type {} from 'redux-thunk/extend-redux'
  • Put /// <reference types="redux-thunk/extend-redux" /> in a .d.ts file that’s included in your type-checking
  • Put import 'redux-thunk/extend-redux' in a .d.ts file that’s included in your type-checking

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { AnyAction, combineReducers } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
 
const rootReducers = combineReducers();

type AppState = ReturnType<typeof rootReducers>;

type TypedDispatch<T> = ThunkDispatch<T, any, AnyAction>;
 
export const useAppDispatch = () => useDispatch<TypedDispatch<AppState>>();

export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;

// USE
const dispatch = useAppDispatch();

const state = useAppSelector((state: AppState) => state.xxx);