Property 'then' does not exist on type 'AsyncThunkAction'

[gpessa]

I have an async action created with createAsyncThunk. Link
Now I bind the dispatch to it with bindActionCreators and I expose the action with a custom hook. Link
If now I try to use the async action, the then is not a recognized property and I get an error Link

Property 'then' does not exist on type 'AsyncThunkAction<number, number, {}>'

Do you have any ideas?
My dispatch is custom typed and therefore everything should be correct

[msutkowski]

bindActionCreators doesn't appear to infer your custom dispatch type, and instead uses the default Dispatch. You could try augmenting the type as described here: #684

declare module 'redux' {
  export interface Dispatch<A extends Action = AnyAction> extends typeof store.dispatch {  }
}

[leonardolombardi07]

Sorry if I'm in the wrong place, but I'm having a problem that I think is somewhat related.
I also created an action creator with createAsyncAction - Link.

If I want to use this action creator inside an async function and, for example, console.log the result after the async action has been completed, I get "await has no effect on the type of this expression" before the dispatch function, although everything is working fine and it actually awaits for the action to be completed. Here's the Link for my code and here's a Link for an example of this use in the RTK documentation.

This is not an issue per se, but I'm guessing a problem with the dispatch typing. As I'm not using typescript, is there a workaround to fix this in javascript?

Thanks and thanks for this amazing library!

[phryneas]

@leonardolombardi07 you need to correctly type your useDispatch hook

[seviucha]

Had same issue and solved it within configureStore.
Before fix I had:
middleware: [ routerMiddleware(history), ...getDefaultMiddleware(), ]
and

export type AppDispatch = typeof store.dispatch
export const useAppDispatch = () => useDispatch<AppDispatch>()

Then I changed to:

middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(routerMiddleware(history)),

That tiny difference helped a lot. Now my dispatch function is typed correctly and I can use .then without errors.
Additional info here: https://redux-toolkit.js.org/api/getDefaultMiddleware

It is preferrable to use the chainable .concat(...) and .prepend(...) methods of the returned MiddlewareArray instead of the array spread operator, as the latter can lose valuable type information under some circumstances.