logger.ts

import { ActionReducer, Action } from '@ngrx/store';

const repeat = (str, times) => (new Array(times + 1)).join(str);
const pad = (num, maxLength) => repeat(`0`, maxLength - num.toString().length) + num;
const formatTime = (time) => `@ ${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`;

export function storeLogger<T>(reducer: ActionReducer<T>): ActionReducer<T> {
  let lastState;

  return function(state: T, action: Action): T {
    console.groupCollapsed(`%c${action.type}`, 'color: #fff; background: #34495e; padding: 2px; font-size: 14px; margin-top: 10px; margin-bottom: 10px;', `${formatTime(new Date())}`);
    console.info('%cPrev state:', 'color: #ccc; font-weight: bold; line-height: 20px', lastState);
    console.info('%cAction:', 'color: #27ae60; font-weight: bold; line-height: 20px', action);

    lastState = reducer(state, action);
    console.info('%cNew state:', 'color: #2980b9; font-weight: bold', lastState);
    console.groupEnd();

    console.log('------------------');

    return lastState;
  }
}