redux-thunk: Property 'type' missing when calling action through store.dispatch()

Question

I have found similar issues online but no solution for when calling a redux-thunk Action through store.dispatch().

I have the following action:

export class DBActions {
  static startDatabase(): ThunkAction<Promise<void>, {}, IClientState, AnyAction> {
    return async (dispatch: ThunkDispatch<{}, {}, AnyAction>, getState: () => IClientState): Promise<void> => {
      return new Promise<void>((resolve) => {
        dispatch(DBActions.connectDatabase())
        setTimeout(() => {
          let connection: (Connection | undefined) = getDBConnection(getState())
          if (connection) {
            dispatch(DBActions.getImports(connection))
            resolve()
          }
        }, 2000)
      })
    }
  }
}

This works without problems when added through mapDispatchToProps in a component, but not when directly called inside my store.ts after defining a store. store.dispatch(DBActions.startDatabase()) leads to:

TS2345: Argument of type 'ThunkAction<Promise<void>, {}, {}, AnyAction>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type 'ThunkAction<Promise<void>, {}, {}, AnyAction>'.

Any help and suggestion is appreciated!

At first glance, your type annotations look correct. Can you try combinations of typing `dispatch` to `Dispatch` from 'redux' and calling via `dispatch(DBActions.connectDatabase())`, or keeping your annotation for `dispatch`, but calling via `dispatch(DBActions.connectDatabase())`, or even via `dispatch>(...)`? — Yakimych, Jan 27 '19 at 22:29
Oh wow, you are right. It really was that simple! `store.dispatch(DBActions.startDatabase())` worked :) Thanks a lot! — Shin, Jan 29 '19 at 18:34
`store.dispatch` looks like a hack rather than a solution IMO. How do you initialize the store? — bonbonez, May 23 '20 at 07:10

score 11 · Answer 1 · answered Nov 03 '19 at 21:01

11

An easy workaround to avoid the error message - though it is not a solution is:

dispatch<any>(DBActions.getImports(connection))

answered Nov 03 '19 at 21:01

Rambatino

4,716
1
33
56

4

It may be a workaround, but it got me out of a hole. Thank you! – harriyott Nov 21 '19 at 15:16
2

why using typescript of using `any`? – Paul Seleznev Dec 12 '19 at 15:33
que? me no understand – Rambatino Dec 13 '19 at 09:16
he probably meant, that `any` disables the purpose of typescript – Titenis Mar 12 '20 at 14:32
1

Ahhh that's why I said it was a "workaround" and not a solution! – Rambatino Jun 05 '20 at 17:13
if you want to use this workaround only in one place: const store = createStore – gaborp Mar 26 '21 at 08:06

score 10 · Answer 2 · answered May 21 '21 at 09:39

You can extend the Dispatch interface of redux using Declaration Merging of TypeScript. Extend the Dispatch interface with a ThunkDispatch overload signature. Then store.dispatch() method can dispatch async action.

store.ts:

import { applyMiddleware, createStore } from 'redux';
import thunk, { ThunkAction } from 'redux-thunk';
import { DBActions } from './action';

declare module 'redux' {
  interface Dispatch<A extends Action = AnyAction> {
    <S, E, R>(asyncAction: ThunkAction<R, S, E, A>): R;
  }
}

const store = createStore((state) => state, applyMiddleware(thunk));

// dispatch async action
store.dispatch(DBActions.startDatabase()).then(() => {
  console.log(store.getState());
});

// dispatch sync action
store.dispatch(DBActions.connectDatabase());

package versions:

"redux": "^4.1.0",
"redux-thunk": "^2.3.0"
"typescript": "^4.2.4"

score 1 · Answer 3 · answered Oct 12 '21 at 17:56

I fought with this for a while, trying different combinations of typings and could not solve it.

It turns out the issue was because I had redux@4.0.5 and redux@4.1.0 installed next to each other.

To fix the issue I just did: yarn install redux@^4.1.10, which removed redux@4.0.5 from my yarn.lock file and resolved the issue!

joseph · Answer 4 · 2020-07-22T15:59:43.260

0

I'm not sure whether this is correct answer or not. The following is my code:

type MyThunkDispatch = ThunkDispatch<{}, {}, AnyAction>;
const thunkDispatch = store.dispatch as MyThunkDispatch;

thunkDispatch(DBActions.startDatabase());

edited Jul 22 '20 at 15:59

answered Jul 22 '20 at 09:00

joseph

71
2
5

redux-thunk: Property 'type' missing when calling action through store.dispatch()

4 Answers4