logrocket/redux-logger

★ 5,723JavaScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((redux-logger))
    What it does
      Log Redux actions
      Show before and after state
      Timestamp each action
    Features
      Color-coded output
      Filter actions
      Diff mode
      Collapse repeats
    Tech stack
      JavaScript
      Redux middleware
      npm
    Use cases
      Debug state bugs
      Trace action flow
      Dev-only logging

mindmap root((redux-logger)) What it does Log Redux actions Show before and after state Timestamp each action Features Color-coded output Filter actions Diff mode Collapse repeats Tech stack JavaScript Redux middleware npm Use cases Debug state bugs Trace action flow Dev-only logging

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Log every Redux action and full before/after state to the browser console while debugging a web app.

USE CASE 2

Filter out noisy actions from the log or collapse repeated entries to focus on what matters.

USE CASE 3

Use diff mode to highlight exactly which parts of the state changed between two actions rather than printing the full state twice.

Tech stack

JavaScriptReduxnpm

Getting it running

Difficulty · easy Time to first run · 5min

Install with npm i redux-logger and register as Redux middleware in two to three lines of code.

License terms not mentioned in the explanation.

In plain English

Redux Logger is a small add-on for JavaScript web applications that use a state management library called Redux. Redux is a system for keeping track of all the data in an app, and every change to that data is triggered by something called an "action". This tool sits in the middle of that process and prints each action to the browser's developer console as it happens, showing what the app's data looked like before the action, what the action itself contained, and what the data looked like after. The main use case is debugging during development. When something goes wrong in a Redux-powered app, a developer can open the browser console and see a color-coded log of every action that fired, including timestamps and how long each action took to process. This makes it much easier to trace the source of a bug than reading through raw code. Installing it takes one line: npm i redux-logger. Plugging it into an existing Redux app requires two or three lines of code to register it as middleware. A default export covers most cases, but developers can also create a custom logger instance with options to filter which actions get logged, collapse repeated entries, show only changes between states, transform how state or actions appear in the log, and control color schemes. The library also supports a "diff" mode (marked as alpha in the README) that highlights exactly which parts of the app's data changed between two actions, rather than printing the full state both times. Maintained by LogRocket, a separate commercial product for recording and replaying user sessions in production. The logger itself is a free, standalone open-source tool and does not require a LogRocket account.

Copy-paste prompts

Prompt 1

I have a Redux app and want to add redux-logger so I can see every action in the browser console. Show me the minimal middleware setup using configureStore or createStore.

Prompt 2

How do I configure redux-logger to only log specific actions and hide others so the console output stays manageable?

Prompt 3

Explain what the diff option in redux-logger shows and give me the config to enable it so I only see the parts of state that changed.

Open on GitHub → Explain another repo

← logrocket on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.