redux-logger

redux-logger is a small Redux middleware that intercepts every dispatched action and prints a grouped console entry showing the action itself alongside the store’s previous and next state. It ships as a drop-in default export for zero-config setups (import logger from 'redux-logger') and a createLogger(options) factory for customized behavior, and is applied like any other Redux middleware via applyMiddleware.

Beyond the basics, it supports collapsible log groups, per-section console levels (log/warn/error/info), custom color theming, timestamp/duration display, predicate-based filtering to skip specific actions, and optional state diffing (via the bundled deep-diff dependency). Transform hooks (stateTransformer, actionTransformer, errorTransformer) let it print non-plain state shapes, such as Immutable.js structures, in readable form.

The project is functionally complete for its scope and has been stable for years, but development activity is low today (last commit 2020, per GitHub) — it is a mature, largely feature-frozen utility rather than an actively evolving one. It remains widely installed as the default way to eyeball Redux action/state flow during development without a browser devtools extension.

What You Get

• A createLogger(options) factory plus a zero-config default export for immediate use with applyMiddleware
• Grouped console output per action showing prevState, the action, any thrown error, and nextState
• Optional collapsible groups (collapsed) and inline state diffing (diff) to reduce console noise
• Configurable console level (log/warn/error/info) per log section, as a string, object, or function of the action
• Predicate-based filtering (predicate) to skip logging for specific actions or state conditions
• Transform hooks (stateTransformer/actionTransformer/errorTransformer) for non-plain state such as Immutable.js

Common Use Cases

• Wiring logger into applyMiddleware during local development to watch every action/state transition in the browser console
• Gating the middleware behind NODE_ENV === 'development' so it never ships to production bundles
• Using predicate to silence high-frequency or sensitive actions (e.g. auth token actions) while logging everything else
• Enabling diff: true to see exactly which state keys changed after a suspect action, for regression debugging
• Using stateTransformer to convert Immutable.js records to plain JSON before printing, per the documented recipe

Under The Hood

Architecture The package is small and purely functional, split across index.js (the createLogger middleware factory and a default-export back-compat wrapper), core.js (printBuffer, which formats one console group per buffered action), diff.js (a deep-diff-based state-diff renderer), helpers.js (timer/time-formatting utilities), and defaults.js (the flat default-options object). createLogger returns the actual Redux middleware ({ getState }) => next => action => {...} and defensively detects a common misuse — passing createLogger itself directly to applyMiddleware instead of calling it first — printing an actionable console error rather than failing silently. Configuration flows entirely through a flat options object merged over defaults; there is no plugin system or dependency injection, and the logBuffer array is filled and drained synchronously within a single dispatch, so there is no cross-dispatch batching despite the buffer abstraction.

Tech Stack Plain ES2015+ JavaScript, compiled with Babel (babel-preset-es2015) and bundled via Rollup (rollup.config.js) into both CommonJS (dist/redux-logger.js) and ES module (dist/redux-logger.es.js) outputs, then minified with uglify-js. The only runtime dependency is deep-diff, used for the optional diff view. There is no TypeScript in the source — type definitions are published separately via DefinitelyTyped’s @types/redux-logger, per the README. Tests run on Mocha, Chai, and Sinon under nyc for coverage, with codecov upload wired into a CircleCI pipeline (Node 8 image); linting uses ESLint with the airbnb config. The tooling (Rollup config style, Node 8 CI image) reflects the package’s 2015-2017 origins.

Code Quality Three spec files (spec/index.spec.js, spec/diff.spec.js, spec/helpers.spec.js) cover the middleware, diff renderer, and helpers, run via npm run spec behind npm test, which also runs lint first. Error handling in the middleware is deliberate: an error thrown while processing a dispatched action is caught, passed through errorTransformer, logged, then re-thrown so calling code and browser devtools still observe the original failure. Console-grouping calls are wrapped in try/catch with fallbacks (logger.groupEnd() falls back to a plain logger.log line) for environments with partial console support. There is no static typing in the source itself. CI (CircleCI) runs lint and tests on every push, though the project’s last commit was in 2020 and it is now largely feature-frozen.

API Design The public surface is intentionally minimal: a single createLogger(options) factory returning a standard middleware, plus a default export that works with zero configuration for the common case (import logger from 'redux-logger'). Every customization point (level, colors, stateTransformer, predicate, diff, etc.) is an optional key merged over sane defaults, so adopting one feature requires no other changes. Getting started takes one import and one line inside applyMiddleware, though the tradeoff is a fairly large flat options surface once non-default behavior is needed, and TypeScript types are not bundled with the package itself.