Last Updated: July 12, 2018
·
4.026K
· martinhj

Redux middleware logger

Basically from the redux.js.org middleware documentation, but with object diff.

store/store.js

import logger from '../logging/logger'
store = createStore(
  combineReducers({
      reducer,
      routing: routerReducer
  }),
  compose(applyMiddleware(...middleware))
)

logging/logger.js

import { diff } from 'deep-object-diff';
const logger = store => next => action => {
    console.group(action.type)
    const oldState = store.getState()
    console.log('current state', oldState)
    console.info(`dispatching`, action)
    let result = next(action)
    const newState = store.getState()
    console.log('next state', newState)
    console.info('state diff', diff(oldState, newState))
    console.groupEnd()
    return result
}
export default logger