Unable to place logger and thunk in configurestore config middleware property.

I am encoutering a typescript error when adding both redux logger and redux thunk to my store.

store/index.ts

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import reduxLogger from 'redux-logger';
import reduxThunk from 'redux-thunk';

import authReducer from './auth/reducers';
import menusReducer from './menus/reducers';
import monitorReducerEnhancer from './enhancers/monitorReducers';

const rootReducer = combineReducers({
    auth: authReducer,
    menus: menusReducer,

});

const store = configureStore({
    reducer: rootReducer,
    middleware: [reduxLogger, reduxThunk],
    enhancers: [monitorReducerEnhancer],
});


export type AppDispatch = typeof store.dispatch;

export type RootState = ReturnType<typeof rootReducer>;

export default store;

and the error:

TypeScript error in /store/index.ts(17,5):
Property '0' is missing in type '(Middleware | (ThunkMiddleware<{}, AnyAction, undefined> & { withExtraArgument<E>(extraArgument: E): ThunkMiddleware<{}, AnyAction, E>; }))[]' but required in type '[ThunkMiddleware<CombinedState<{ auth: { fetched: boolean; fetching: boolean; error: {}; data: {}; }; menus: {}; }>, AnyAction, null> | ThunkMiddleware<...>]'.  TS2741

    15 | const store = configureStore({
    16 |     reducer: rootReducer,
  > 17 |     middleware: [reduxLogger, reduxThunk],
       |     ^
    18 |     enhancers: [monitorReducerEnhancer],
    19 | });
    20 | 

I believe the issue is caused by this line: https://github.com/reduxjs/redux-toolkit/blob/master/src/configureStore.ts#L125

  M extends Middlewares<S> = [ThunkMiddlewareFor<S>]

The error goes away when changing to

  M extends Middlewares<S> = ThunkMiddlewareFor<S>[]

[phryneas]

It seems to struggle because the default-export from redux-thunk is not only a ThunkMiddleware, but of type ThunkMiddleware & { withExtraArgument<E>(extraArgument: E): ThunkMiddleware<{}, AnyAction, E> }.

Just casting reduxThunk in the above example does the trick:

const store = configureStore({
    reducer: rootReducer,
-    middleware: [reduxLogger, reduxThunk],
+    middleware: [reduxLogger, reduxThunk as ThunkMiddleware],
    enhancers: [monitorReducerEnhancer],
});

I’ll have investigate this further when I have the time and weirdly, a similar problem appears to happen with getDefaultMiddleware, but for now I hope that this is a fix on your side you can live with.

[phryneas]

@chanced probably #552 - #559 will fix is, but isn’t reviewed & merged yet. Until that, #552 contains a workaround.