Redux Devtools Recipes: composeEnhancers, saga middleware, and TypeScript

redux-devtools-ts.md

Redux Devtools Recipes

With composeEnhancers, Router:

const reduxDevToolsCompose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
	trace: true,
	traceLimit: 25,
});

const composeEnhancers = reduxDevToolsCompose || compose;

const store = createStore(
    connectRouter(history)(combineReducers({ ...reducers })),
    composeEnhancers(applyMiddleware(...middleware))
  );

With TS, sagas:

import {applyMiddleware, compose, createStore} from 'redux'
import rootReducer from './reducers/rootReducer'
import createSagaMiddleware from 'redux-saga'
import rootSaga from "./sagas/sagas";

const sagaMiddleware = createSagaMiddleware()

// Add property to global window so TS recognizes it
declare global {
    interface Window {
        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
    }
}

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const enhancer = composeEnhancers(
    applyMiddleware(sagaMiddleware)
)

const store = createStore(
    rootReducer,
    enhancer
)

sagaMiddleware.run(rootSaga)

export default store