Creating Redux Middleware with Typescript

Question

I want to get the state with type checking in my redux middleware. Using Typescript 2.6.2, I can readily create a redux middleware as follows:

import { Middleware, MiddlewareAPI, Dispatch } from 'redux';
import { IState } from '~/shared/rootReducer';

const logger: Middleware = 
    <S>({ getState }: MiddlewareAPI<S>) => (next: Dispatch<S>) => (action: any) => {
    console.log(action);
    next(action);
};

export default logger;

I'd like to do const { songs } = getState(); with typechecking, but I can't infer the type of S to be of IState, which is the type of my root reducer. Attempting to do const logger: Middleware = <S extends IState> gives me this error:

Type 'S' is not assignable to type 'IState'.

I've also tried creating a method that returns state is IState, but that failed as well. And I could do this:

const state = <IState><any>getState();

But I really rather not.

arpl · Accepted Answer · 2017-12-17 21:45:06Z

4

As far as I understand TS in version redux@^3.7.2 it is not possible to have your state typed within the middleware. The following is a workaround and you need to cast the middlewares in applyMiddlewares.

`Middleware`

import { MiddlewareAPI, Dispatch, Action } from 'redux';
import { IState } from '~/shared/rootReducer';

const logger = (api: MiddlewareAPI<IState>) => {
  const { songs } = api.getState();
  return (next: Dispatch<IState>) => (action: Action) => {
    return next(action);
  };
};

export default logger;

logger is not of type Middleware since it's not generic over S because we closed <S> by specifying the concrete IState. applyMiddleware is expecting Middleware[] hence the cast.

`Setup`

applyMiddleware(...middlewares as Middleware[]);

edited Dec 17, 2017 at 21:45

answered Dec 16, 2017 at 23:14

arpl

3,6433 gold badges21 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

azizj Over a year ago

Doesn't work, because I get the following error in applyMiddleware(..middewares): Type 'S' is not assignable to type 'IState'.

azizj Over a year ago

The applyMiddleware function in their type definitions doesn't have generic typings. This is what I see in index.d.ts: export function applyMiddleware(...middlewares: Middleware[]): GenericStoreEnhancer;, which would explain the error of TS2558: Expected 0 type arguments, but got 1. that I'm getting

arpl Over a year ago

You're right, I checked it also. Give me a sec. I was also missing a brace };

arpl Over a year ago

For now you cast applyMiddleware(...middlewares as Middleware[]) and get on with it. Version 4.0 of redux has new TS definitions. I'll spend some more time on it and get back with a better solution.

wnbates Over a year ago

The MiddlewareAPI signature has changed and should now be MiddlewareAPI<Dispatch, IState>

Collectives™ on Stack Overflow

Creating Redux Middleware with Typescript

1 Answer 1

`Middleware`

`Setup`

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Middleware

Setup

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related

`Middleware`

`Setup`