import { createStore , applyMiddleware , compose , Middleware , MiddlewareAPI , Dispatch , } from 'redux' ; import createSagaMiddleware from 'redux-saga' ; import appSagas from './saga' ; import rootReducer from './reducer' ; const sagaMiddleware = createSagaMiddleware ( ) ; let middleware ; let composer ; if ( process . env . NODE_ENV === 'development' ) { const debuggerMiddleware = ( store ) => ( next ) => ( action ) => { const beforeChanges = { ... store . getState ( ) } ; console . log ( '%c beforeChanges:::' , 'color:#6b5b95;font-weight:bold;font-size:12px;' , beforeChanges ) ; console . log ( ) ; console . log ( `%c action:::${ new Date ( ) }` , 'color:#eca1a6;font-weight:bold;font-size:12px;' , action . type , action . payload ) ; console . log ( ) ; next ( action ) ; console . log ( '%c currentState:::' , 'color:#feb236;font-weight:bold;font-size:12px;' , { ... store . getState ( ) } ) ; console . log ( '________________' ) ; } ; middleware = [ sagaMiddleware , debuggerMiddleware ] ; composer = compose ; } else { middleware = [ sagaMiddleware ] ; composer = compose ; } export default function configureStore ( ) { const store = createStore ( rootReducer ( ) , undefined , composer ( applyMiddleware ( ... middleware ) ) ) ; sagaMiddleware . run ( appSagas ) ; if ( ( module as any ) . hot ) { ( module as any ) . hot . accept ( ( ) => store . replaceReducer ( rootReducer ( ) ) ) ; } return { store } ; }