Redux & Typescript middleware

Question

I'm trying to convert a Javascript written React app to Typescript but it really pushes me hard. Error messages are really hard to understand for me. I tried to create a simple middleware but it gives an error on which I have been trying to solve about 5 hours.

const loggerMiddleware: Middleware = (api: MiddlewareAPI) => (next: Dispatch<AnyAction>) => (action) => {
    const returnValue = next(action)

    console.log('state after dispatch', api.getState())

    // This will likely be the action itself, unless
    // a middleware further in chain changed it.
    return returnValue

}

export default function configureStore(history: History, initialState?: ApplicationState) {
    const middleware = [
        loggerMiddleware
    ];

    const rootReducer = combineReducers({
        ...reducers,
        router: connectRouter(history)
    });

    const enhancers = [];
    const windowIfDefined = typeof window === 'undefined' ? null : window as any;
    if (windowIfDefined && windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__) {
        enhancers.push(windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__());
    }

    return createStore(
        rootReducer,
        initialState,
        compose(applyMiddleware(...middleware), ...enhancers)
    );
}

Severity    Code    Description Project File    Line    Suppression State   Suppression State
Error   TS2345  (TS) Argument of type '{ loggerMiddleware: Middleware<{}, any, Dispatch<AnyAction>>; }' is not assignable to parameter of type 'Middleware<any, any, any>'.
  Type '{ loggerMiddleware: Middleware<{}, any, Dispatch<AnyAction>>; }' provides no match for the signature '(api: MiddlewareAPI<any, any>): (next: Dispatch<AnyAction>) => (action: any) => any'.

What is the compiler trying to say?

Ross Allen · Accepted Answer · 2019-12-09 14:27:45Z

1

It looks like your loggerMiddleware is being exported as a named export. Import it by name (by wrapping it in brackets) in the bottom file of your code:

import { loggerMiddleware } from '../where/the/file/is.js';

answered Dec 9, 2019 at 14:27

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

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

Collectives™ on Stack Overflow

Redux & Typescript middleware

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related