25

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!

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

4 Answers 4

11

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

dispatch<any>(DBActions.getImports(connection))
6
  • 4
    It may be a workaround, but it got me out of a hole. Thank you!
    – harriyott
    Nov 21, 2019 at 15:16
  • 2
    why using typescript of using any? Dec 12, 2019 at 15:33
  • que? me no understand
    – Rambatino
    Dec 13, 2019 at 9:16
  • he probably meant, that any disables the purpose of typescript
    – Titenis
    Mar 12, 2020 at 14:32
  • 1
    Ahhh that's why I said it was a "workaround" and not a solution!
    – Rambatino
    Jun 5, 2020 at 17:13
10

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"
1

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 [email protected] and [email protected] installed next to each other.

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

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());

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.