@ngrx/store-devtools

What is @ngrx/store-devtools?

@ngrx/store-devtools is a powerful tool for debugging and inspecting the state of your Angular applications using NgRx. It provides time-travel debugging, state inspection, and action logging, which can significantly enhance the development experience.

What are @ngrx/store-devtools's main functionalities?

Time-Travel Debugging

Time-travel debugging allows you to go back and forth through the state changes in your application. This is useful for understanding how state evolves over time and for identifying where things might have gone wrong.

import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
  ],
})
export class AppModule {}

State Inspection

State inspection allows you to view the current state of your application at any point in time. This can be extremely helpful for debugging and understanding the state of your application.

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: false,
    }),
  ],
})
export class AppModule {}

Action Logging

Action logging provides a log of all the actions that have been dispatched in your application. This can help you understand the sequence of events that led to a particular state.

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: false,
    }),
  ],
})
export class AppModule {}

Other packages similar to @ngrx/store-devtools

redux-devtools

Redux DevTools is a set of tools to help debug Redux applications. It offers similar functionalities to @ngrx/store-devtools, such as time-travel debugging, state inspection, and action logging. However, it is designed for use with Redux rather than NgRx.

mobx-devtools

MobX DevTools provides a set of tools for debugging MobX applications. It includes features like state inspection and action logging, similar to @ngrx/store-devtools, but is tailored for use with MobX.

vue-devtools

Vue DevTools is a set of debugging tools for Vue.js applications. It offers state inspection, time-travel debugging, and action logging, similar to @ngrx/store-devtools, but is specifically designed for Vue.js.

README

@ngrx/store-devtools

Devtools for @ngrx/store.

Installation

npm install @ngrx/store-devtools --save

Instrumentation

To instrument @ngrx/store and use the devtools, you will need to setup the instrumentation providers using instrumentStore():

import {StoreDevtoolsModule} from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreModule.provideStore(rootReducer),
    // Note that you must instrument after importing StoreModule
    StoreDevtoolsModule.instrumentStore({
      maxAge: 5,
      monitor: monitorReducer
    })
  ]
})

See @ngrx/store-log-monitor for an example monitor built for Angular 2

Contributing

Please read contributing guidelines here.

Changelog

14.0.0-beta.0 (2022-05-30)

• Closes #3344, #3345 (70056a8), closes #3344 #3345

Bug Fixes

• store: rename template literal to string literal for createActionGroup (#3426) (7d08db1)

Features

• schematics: remove creators option (#3311) (e86278a)
• update Angular packages to latest v14 RC (#3425) (f15dd1e), closes #3417
• component: add error as value to LetDirective's context (#3380) (6452e24), closes #3343
• component: add suspense template input to LetDirective (#3377) (345ee53), closes #3340
• component: use global render strategy in zone-less mode (#3379) (f233dae), closes #3342
• component-store: add OnStoreInit and OnStateInit lifecycle hooks (#3368) (0ffed02), closes #3335
• eslint-plugin: add NgRx ESLint Plugin (#3373) (ae0041b)
• store: add createActionGroup function (#3381) (2cdecb3), closes #3337
• store: install and configure the @ngrx/eslint-plugin on ng-add (#3386) (bf2672e)

Performance Improvements

• component: reset state / trigger CD only if necessary (#3328) (f5b055b)

BREAKING CHANGES

• 1. The context of LetDirective is strongly typed when null or undefined is passed as input.

BEFORE:

<p *ngrxLet="null as n">{{ n }}</p>
<p *ngrxLet="undefined as u">{{ u }}</p>

• The type of n is any.
• The type of u is any.

AFTER:

<p *ngrxLet="null as n">{{ n }}</p>
<p *ngrxLet="undefined as u">{{ u }}</p>

• The type of n is null.
• The type of u is undefined.

• schematics: BEFORE:

Creating actions, reducers, and effects is possible without using the creator syntax is possible.

AFTER:

• All schematics use the non-creator syntax to scaffold the code.
• The option --creators (and -c) is removed from the schematic options.
• The skipTests option is removed while generating actions.

• Minimum version of Angular has been updated

BEFORE:

Minimum version of Angular was 13.x

AFTER:

Minimum version of Angular is 14.x

• component: The native local rendering strategy is replaced by global in zone-less mode for better performance.

BEFORE:

The change detection is triggered via changeDetectorRef.detectChanges in zone-less mode.

AFTER:

The change detection is triggered via ɵmarkDirty in zone-less mode.

• component: The $error property from LetDirective's view context is a thrown error or undefined instead of true/false.

BEFORE:

<p *ngrxLet="obs$; $error as e">{{ e }}</p>

• e will be true when obs$ emits error event.
• e will be false when obs$ emits next/complete event.

AFTER:

<p *ngrxLet="obs$; $error as e">{{ e }}</p>

• e will be thrown error when obs$ emits error event.
• e will be undefined when obs$ emits next/complete event.

<a name="13.1.0"></a>