withLogger.js

const withLogger = (reducer) => (state, action) => {
  const boldStyle = 'font-weight:bold';
  console.groupCollapsed(`%caction %c${action.type}`, 'color:#CCC', boldStyle);
  console.log('%cprev state', `${boldStyle};color:#9E9E9E`, state);
  console.log('%caction    ', `${boldStyle};color:#03A9F4`, action);
  const after = reducer(state, action);
  console.log('%cnext state', `${boldStyle};color:#4CAF50`, after);
  console.groupEnd();
  return after;
};

// use
// const [state, dispatch] = useReducer(withLogger(reducer), initialState);