@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

The sources for this package are in the main NgRx repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

15.0.0-beta.0 (2022-11-03)

Features

• component: add migration for replacing ReactiveComponentModule (#3506) (49c6cf3), closes #3491
• component: handle observable dictionaries (#3602) (42efccb), closes #3545
• component: remove ReactiveComponentModule (#3643) (4bdf345), closes #3623
• component-store: Add SelectorObject to select (#3629) (f8d0241), closes #3632 #3631
• effects: change the signature of provideEffect (#3587) (899afe7)
• effects: migration for provideEffects argument (#3601) (f7dfeab)
• effects: remove @Effect decorator (#3634) (96c5bdd), closes #3617
• eslint-plugin: remove rules using @Effect (#3635) (5f74e61)
• schematics: drop support for TypeScript <4.8 (#3631) (b9c1ab6)
• store: make reducers arg of StoreModule.forRoot optional (#3632) (e5177aa)
• store: strict projector for selectors with props (#3640) (351459f), closes #3571
• store: strict projectors (#3581) (43198a2), closes #3571

BREAKING CHANGES

• component: ReactiveComponentModule is removed in favor of LetModule and PushModule.

BEFORE:

import { ReactiveComponentModule } from '@ngrx/component';

@NgModule({
  imports: [
    // ... other imports
    ReactiveComponentModule,
  ],
})
export class MyFeatureModule {}

AFTER:

import { LetModule, PushModule } from '@ngrx/component';

@NgModule({
  imports: [
    // ... other imports
    LetModule,
    PushModule,
  ],
})
export class MyFeatureModule {}

• store: The projector method has become strict

BEFORE:

You could pass any arguments to the projector method

const selector = createSelector( selectString, // returning a string selectNumber, // returning a number (s, n, prefix: string) => { return prefix + s.repeat(n); } )

// you could pass any argument selector.projector(1, 'a', true);

AFTER:

const selector = createSelector( selectString, // returning a string selectNumber, // returning a number (s, n, prefix: string) => { return prefix + s.repeat(n); } )

// this throws selector.projector(1, 'a', true); // this does not throw because the arguments have the correct type selector.projector(1, 'a', 'prefix');

• store: The projector function on the selector is type-safe by default.

BEFORE:

The projector is not type-safe by default, allowing for potential mismatch types in the projector function.

const mySelector = createSelector(
  () => 'one',
  () => 2,
  (one, two) => 3
);

mySelector.projector(); // <- type is projector(...args: any[]): number

AFTER:

The projector is strict by default, but can be bypassed with an any generic parameter.

const mySelector = createSelector(
  () => 'one',
  () => 2,
  (one, two) => 3
);

mySelector.projector(); // <- Results in type error. Type is projector(s1: string, s2: number): number

To retain previous behavior

const mySelector = createSelector(
  () => 'one',
  () => 2,
  (one, two) => 3
)(mySelector.projector as any)();

• effects: The @Effect decorator is removed

BEFORE:

Defining an effect is done with @Effect

@Effect() data$ = this.actions$.pipe();

AFTER:

Defining an effect is done with createEffect

data$ = createEffect(() => this.actions$.pipe());

• effects: The signature of provideEffects is changed to expect a spreaded array of effects.

BEFORE:

provideEffects expecteded the effects to be passed as an array.

// single effect
provideEffects([MyEffect]);

// multiple effects
provideEffects([MyEffect, MySecondEffect]);

AFTER:

provideEffects expects the effects as a spreaded array as argument.

// single effect
provideEffects(MyEffect);

// multiple effects
provideEffects(MyEffect, MySecondEffect);

<a name="14.3.2"></a>