? NgRx Store DevTools

NgRx • Debugging • Redux DevTools

NgRx Store DevTools is a powerful debugging companion that lets you inspect actions, visualize state changes, and even time-travel through your application’s state history using the Redux DevTools browser extension.

? Quick Overview

NgRx Store DevTools hooks your NgRx store into the Redux DevTools extension so you can:

See every dispatched action and its payload.
Track how state evolves over time.
Jump back and forth between states (time-travel debugging).
Export and import state history for deeper debugging sessions.
Control and restrict DevTools behavior in production builds.

? Key Concepts

StoreDevtoolsModule – NgRx module that connects your store to Redux DevTools.
instrument() – configures how DevTools records and displays state.
maxAge – how many past states are kept in history.
logOnly – allows read-only DevTools in production (no time-travel or dispatch).
Environment-based config – use environment.production to toggle features safely.
Time-travel debugging – replay actions and inspect how state changes step by step.

⚙️ Setup & Syntax

To use NgRx Store DevTools you need:

The @ngrx/store-devtools package installed in your project.
The Redux DevTools browser extension (Chrome / Firefox, etc.).
Configuration of StoreDevtoolsModule.instrument() in your AppModule.

The core idea is to wrap your root store with DevTools instrumentation so every action and state transition is mirrored into the DevTools UI.

? Code Example – AppModule Integration

The following example shows how to install and configure NgRx Store DevTools in your Angular application:

? View Code Example

// Install the DevTools package in your Angular project
npm install @ngrx/store-devtools --save

// app.module.ts – configure NgRx Store DevTools
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { reducers } from './reducers';

@NgModule({
  imports: [
    StoreModule.forRoot(reducers),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retain the last 25 states for time-travel debugging
      logOnly: environment.production // In production, allow read-only logging only
    })
  ]
})
export class AppModule {}

? Live Output / Explanation

What You See in Redux DevTools

Every time you dispatch an action (e.g., [Todos] Add Todo), it appears in the DevTools timeline with its payload.
Selecting an action shows three snapshots: Previous State, Action, and Next State.
You can scrub through the action list to “time travel” and see how the UI would look at any point in history.
The “State” tab lets you explore deeply nested slices created by NgRx Entity, Feature Stores, and Selectors.
Using the export/import feature, you can share a complete bug scenario (actions + state history) with another developer.

? Tips & Best Practices

Use a reasonable maxAge (e.g., 25–50) to balance memory usage with debugging depth.
Always restrict DevTools in production using logOnly: environment.production to avoid exposing sensitive data or allowing action replay.
Combine DevTools with Selectors and NgRx Entity for clearer, more structured state views.
Name actions descriptively (e.g., [Auth] Login Success) so the DevTools timeline reads like a story of user interactions.

? Try It Yourself / Practice Tasks

Install the Redux DevTools extension in your browser and confirm that it detects your NgRx app.
Dispatch a few actions (e.g., adding/removing items in a list) and observe how the state changes in the DevTools “State” tab.
Experiment with time-travel debugging by replaying a sequence of actions and watching your UI respond.
Change maxAge from 25 to 5 and note how the history length affects time-travel.
Toggle logOnly and rebuild for production mode to see how the DevTools capabilities change.
Create a small feature state (e.g., a counter) and use DevTools to export and share the action/state history with a teammate.