@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

19.0.0-rc.0 (2024-12-10)

Bug Fixes

• eslint-plugin: support ESM modudule syntax (.mjs) (e2f35c8)
• signals: create deep signals for custom class instances (#4614) (4d34dc4), closes #4604

Features

• eslint-plugin: add new rule require-super-ondestroy (#4611) (2ac4372), closes #4505
• signals: add signalMethod (#4597) (bdd1d3e), closes #4581
• signals: add withProps base feature (#4607) (e626082)
• signals: add migration for withProps (#4612) (5f803d0), closes #4608
• store: enable dispatching actions on signal changes (#4600) (2528d39), closes #4537

BREAKING CHANGES

• signals: - The computed property in SignalStoreFeatureResult type is renamed to props.

• The EntityComputed and NamedEntityComputed types in the entities plugin are renamed to EntityProps and NamedEntityProps.

BEFORE:

import { computed, Signal } from '@angular/core';
import { signalStoreFeature, SignalStoreFeature, type, withComputed } from '@ngrx/signals';
import { EntityComputed } from '@ngrx/signals/entities';

export function withTotalEntities<Entity>(): SignalStoreFeature<{ state: {}; computed: EntityComputed<Entity>; methods: {} }, { state: {}; computed: { total: Signal<number> }; methods: {} }> {
  return signalStoreFeature(
    { computed: type<EntityComputed<Entity>>() },
    withComputed(({ entities }) => ({
      total: computed(() => entities().length),
    }))
  );
}

AFTER:

import { computed, Signal } from '@angular/core';
import { signalStoreFeature, SignalStoreFeature, type, withComputed } from '@ngrx/signals';
import { EntityProps } from '@ngrx/signals/entities';

export function withTotalEntities<Entity>(): SignalStoreFeature<{ state: {}; props: EntityProps<Entity>; methods: {} }, { state: {}; props: { total: Signal<number> }; methods: {} }> {
  return signalStoreFeature(
    { props: type<EntityProps<Entity>>() },
    withComputed(({ entities }) => ({
      total: computed(() => entities().length),
    }))
  );
}

<a name="19.0.0-beta.0""></a>