@tacky/store/es/middlewares/logger.js

State management framework based on react

import { deepMerge } from '../utils/deep-merge';
import { NAMESPACE } from '../const/symbol';

function createLoggerMiddleware() {
  return function (_ref) {
    var dispatch = _ref.dispatch;
    return function (next) {
      return function (action) {
        if (!action.domain) {
          return next(action);
        }

        console.group("%caction: ".concat(action.name, ", namespace: ").concat(action.domain[NAMESPACE], ", prev state:"), 'color: red');
        console.dir(deepMerge({}, action.domain, {
          clone: true
        })); // deep copy，logger current state before change.

        console.groupEnd();
        var nextResult = next(action); // wait the result of the next middleware

        console.group("%caction: ".concat(action.name, ", namespace: ").concat(action.domain[NAMESPACE], ", next state:"), 'color: green');
        console.dir(deepMerge({}, action.domain, {
          clone: true
        })); // deep copy，logger current state after change.

        console.groupEnd();
        return nextResult;
      };
    };
  };
}

export default createLoggerMiddleware();