How to use middleware for logging actions and state changes in Redux

Question

Can you explain to me How to use middleware for logging actions and state changes in Redux?

Answer 1

To use middleware for logging actions and state changes in Redux:

Custom Logger Middleware:

const logger = store => next => action => {

  console.log('Dispatching:', action);

  const result = next(action);

  console.log('Next State:', store.getState());

  return result;

};

Apply Middleware:

import { createStore, applyMiddleware } from 'redux';

const store = createStore(rootReducer, applyMiddleware(logger));