Argument of type 'AsyncThunkAction' is not assignable to parameter of type 'AnyAction' error in redux with typescript

Question

I have a dispatch function:

    const dispatch = useAppDispatch()
    
    const handleFetch = (e: React.MouseEvent<HTMLAnchorElement>) => {
        const target = e.target as Element
        dispatch(fetchCity(parseInt(target.id)))
        localStorage.setItem('location', target.id)
    }

The async thunk function looks like this:

export const fetchCity = createAsyncThunk('city/fetchCity', async (id: number) => {
    const res = await fetch(`${apiUrl}/${id}`)
    .then(res => res.json())

    return res        
})

My useAppDispatch hook looks like this, It's same as the one in redux typescript docs:

import type { AppDispatch } from "./redux/store";
export const useAppDispatch: () => AppDispatch = useDispatch

The AppDispatch type looks like this, It's, again, from redux typescript docs:

export type AppDispatch = typeof store.dispatch

The problem is in the

dispatch(fetchCity(parseInt(target.id)))

The error says this: Argument of type 'AsyncThunkAction<any, number, {}>' is not assignable to parameter of type 'AnyAction'.

I even tried just doing:

dispatch(fetchCity(1))

And I got the same error.

What do I do, I'm confused because I did all of this the same as it was in the redux docs?

Does this answer your question? [Argument of type 'AsyncThunkAction' is not assignable to parameter of type 'AnyAction'](https://stackoverflow.com/questions/70143816/argument-of-type-asyncthunkactionany-void-is-not-assignable-to-paramete) — Konrad, Nov 15 '22 at 18:23
It does not, I already looked at that. The code in the answers is the same as mine — Isa Seferović, Nov 15 '22 at 18:25

score 0 · Answer 1 · answered Jun 05 '23 at 05:32

I had the same problem. In my case, I had this mistaken line in my store.tsx:

export const store: EnhancedStore = configureStore(...)

The EnhancedStore type returns a dispatch that doesn't support thunks. Changing it to:

export const store = configureStore(...)

allowed TypeScript to infer the type as ToolkitStore which fixed it.

If your store is not a ToolkitStore, take another look at how you're initializing it.

Argument of type 'AsyncThunkAction' is not assignable to parameter of type 'AnyAction' error in redux with typescript

1 Answers1