Learning Redux

Logging middleware

Edit src/middleware/logger.js and define the logging middleware:

1. We start by defining the logger middleware function:

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

2. First, we start a logging group based on the action type:

  if (console.group) console.group(action.type)

3. Next, we log the action:

  console.info('dispatching', action)

4. Then, we apply the next middleware function (or the dispatch function) and store the result:

  const result = next(action)

5. After applying the next function, we log the new state of the store:

  console.log('new state', store.getState())

6. Finally, we end the logging group and return the result we stored earlier:

  if (console.groupEnd) console.groupEnd(action.type)  return result}

7. Do not forget ...