TypeScript Error in Middleware

[unstubbable]

The overloading of Dispatch by redux-thunk breaks middlewares that only handle standard action objects (as apposed to thunks).

Example:

import {Action, Dispatch, Middleware, Store} from 'redux';
import {IAppState} from '../reducers';

export const middleware: Middleware = (store: Store<IAppState>) => (next: Dispatch<IAppState>) => (action: Action) => {
  // Do something with the action ...
  next(action);
};

The resulting error is:

Type '(store: Store<IAppState>) => (next: Dispatch<IAppState>) => (action: Action) => void' is not assignable to type 'Middleware'.
  Type '(next: Dispatch<IAppState>) => (action: Action) => void' is not assignable to type '(next: Dispatch<any>) => Dispatch<any>'.
    Type '(action: Action) => void' is not assignable to type 'Dispatch<any>'.
      Types of parameters 'action' and 'asyncAction' are incompatible.
        Type '(dispatch: Dispatch<any>, getState: () => any, extraArgument: any) => any' is not assignable to type 'Action'.
          Property 'type' is missing in type '(dispatch: Dispatch<any>, getState: () => any, extraArgument: any) => any'.

A possible fix to remove the compiler error would be to declare a union type for the Action, i.e. Action | Redux.ThunkAction<any, IAppState, any>:

export const middleware: Middleware = (store: Store<IAppState>) => (next: Dispatch<IAppState>) => (action: Action | Redux.ThunkAction<any, IAppState, any>) => {
  // Do something with the action ...
  next(action as Action);
};

But this is incorrect if your middleware only handles Action!

The better solution would be to declare a Dispatch interface within the redux-thunk module that extends Redux.Dispatch. This Dispatch could then be used in action creators that return a ThunkAction:

import {IAppState} from '../reducers';
import {ThunkAction, Dispatch} from 'redux-thunk';

export function thunkedActionCreator(): ThunkAction<void, IAppState, void> {
  return (dispatch: Dispatch<IAppState>, getState: () => IAppState): void => {
    // Do something async and dispatch actions or other thunks ...
  };
}

Middlewares on the other hand would use Redux.Dispatch (see middleware example above).

[unional]

I think something is missing here. You do need to augment the Dispatch<S> from redux so that you can call store.dispatch() with thunk.

[unstubbable]

@unional Yeah, I didn't really explain this case. You can see in my PR that the Store needs to be imported from redux-thunk as well in order for this to work:

import thunk, { Dispatch, ThunkAction, Store } from '../index.d.ts';

declare const store: Store<{foo: string}>;

store.dispatch((dispatch, getState, extraArg) => {
  console.log(extraArg);
});

This is of course a very synthetic example. In a real application you would probably have something like a configureStore function that would return an instance of the Store by redux-thunk, e.g.:

import {applyMiddleware, createStore} from 'redux';
import thunk, {Store} from 'redux-thunk';
import rootReducer, {IAppState} from './rootReducer';

export default function configureStore(initialState: IAppState): Store<IAppState> {
  // You could also configure devtools here and compose with middleware enhancer.
  return createStore(rootReducer, initialState, applyMiddleware(thunk));
}

This instance would then be able to dispatch thunks.

[unional]

Well, I think that's a problem. Store does not belongs to redux-thunk, so we should not export and require user to import Store from redux-thunk.

Think about it this way: If redux and redux-thunk are written in TS to begin with, what should have happened? It is an augmentation of a method and should be remain as so.

My two cents, 🌷

[unstubbable]

@unional, maybe I'm misunderstanding something, but let me try to give you a different perspective.

The Store created by createStore in the above example is created by the enhancer returned by applyMiddleWare, which takes the Store instance from the original createStore and replaces the dispatch method with the composed version of all supplied middlewares. Since thunk is the first middleware in the chain, Store.dispatch is in fact not the base implementation by redux but the one by redux-thunk. This is expressed by

export interface Store<S> extends ReduxStore<S> {
  dispatch: Dispatch<S>;
}

in my PR and consequently the interface has to be imported from redux-thunk and used as the return type of configureStore if this is what configureStore is doing internally.

[unional]

I can understand what is your confusion.

If it is written in typescript, you would do module augmentation. And the Store is still imported from redux instead of redux-thunk.

If it follows your implementation, then other packages which augment Dispatch would need to do the same thing. If user wants to use both redux-thunk and redux-promise, where should he/she gets the Store from?

[unstubbable]

If it follows your implementation, then other packages which augment Dispatch would need to do the same thing. If user wants to use both redux-thunk and redux-promise, where should he/she gets the Store from?

From whichever is first in the middleware chain. After all the signature of this dispatch matches the one that applyMiddleWare assigns to the Store, doesn't it?

[unional]

From whichever is first in the middleware chain.

IMO is not a proper picture. Consider these:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import prom from 'redux-promise';
import rootReducer from './reducers';
import { Store } from '???'

// Note: this API requires redux@>=3.1.0
const store: Store = createStore(
  rootReducer,
  applyMiddleware(thunk, prom)
);

const store2: Store = createStore(
  rootReducer,
  applyMiddleware(prom, thunk)
);

Where should the Store come from? the order of the middleware should have nothing to do with where you get the Store from. That's why it is an augmentation.

[unstubbable]

I see your point. But how can you write a middleware with augmentation then and solve this issue?

[born2net]

I am using the latest ts and still same issue of:

Error:(13, 29) TS2345:Argument of type '(dispatch: any) => void' is not assignable to parameter of type 'Action'.
  Property 'type' is missing in type '(dispatch: any) => void'.

as I am dispatching a thunk

any ideas?

[unional]

I see your point. But how can you write a middleware with augmentation then and solve this issue?

With module augmentation (as it is right now), you will get the Store from redux.

[unional]

@born2net I think you did not have the typings loaded. It is not distributed in 2.1
You need to get it from github somehow, or use typings for this purpose.

[born2net]

you have a link to the latest / proper definition file I should use?