redux-thunk with typescript

Question

I am trying to learn redux and I am trying to implement the redux-thunk middleware. I've been following a few different tutorials and they suggest something similar to this:

import thunk from "redux-thunk";
import promise from "redux-promise-middleware";
...
const middleware = applyMiddleware(promise(), thunk);
const store = createStore(reducers, middleware);

This gives me the following error:

/Users/me/Documents/workspace/redux/node_modules/redux-thunk/index.d.ts (4,47): Generic type 'Dispatch' requires 2 type argument(s).

Can someone please explain what is going on and how to fix this?

Many thanks

Answer 1

I think you need to type dispatch in a way:

interface IStoreState {
  readonly pendingActions: number;
  readonly isAuthenticated: boolean;
};

function signIn(): (dispatch: Dispatch<IStoreState>) =>  ....

Related article .

Answer 2

This problem turns out to be related to the new version of redux (4.0.0) being incompatible with the current version of redux-thunk (2.2.0).

See this link: https://github.com/gaearon/redux-thunk/issues/169

and this PR: https://github.com/gaearon/redux-thunk/pull/180