I'm currently in the process of setting up the dispatch type for a redux store that utilizes thunk middleware and an optional logger middleware (redux-logger).
Everything works fine when inferring the thunk type on the store's dispatch...
import { createStore, applyMiddleware } from 'redux';
import thunk, { ThunkMiddleware } from 'redux-thunk';
// ...
const preloadedState = undefined;
export const store = createStore(rootReducer, preloadedState, applyMiddleware(thunk as ThunkMiddleware));
https://i.sstatic.net/U3Fd9.png
However, when I try to expand the middleware setup to include a conditional logger and spread an array of middleware using applyMiddleware, the store's dispatch doesn't get inferred correctly.
import { createStore, applyMiddleware, Middleware } from 'redux';
import thunk, { ThunkMiddleware } from 'redux-thunk';
import { createLogger } from 'redux-logger';
// ...
const middleware: Middleware[] = [thunk as ThunkMiddleware];
if (Settings.environment === 'development') {
const logger = createLogger({ collapsed: (_getState, _action, logEntry) => !logEntry.error });
middleware.push(logger);
}
const preloadedState = undefined;
export const store = createStore(rootReducer, preloadedState, applyMiddleware(...middleware));
https://i.sstatic.net/f13KI.png
I'm getting pretty frustrated with this issue. Any suggestions on how to fix the typing problem when spreading the middleware array?