How should I log every dispatch call to a Redux store?

Question

I want to debug my Redux application by logging every action sent to the dispatcher in my the console.

What is generally regarded as the best approach for doing this?

Answer 1

You can use a simple logging middleware, like the example in the redux middleware docs:

const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd()
  return result
}

Or use the redux-logger module, which basically does the same thing.

With TypeScript, use this annotation (where TStore is the type-name of the root of your state:

import { Middleware } from 'redux';

  // ...

const logger: Middleware<{},TState> = store => next => action => {
  console.group(action.type)
  // etc