@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/platform repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

4.0.0 (2017-07-18)

Bug Fixes

• build: Fixed deployment of latest master as commit (#18) (5d0ecf9)
• build: Get tests running for each project (c4a1054)
• build: Limit concurrency for lerna bootstrap (7e7a7d8)
• Devtools: Removed SHOULD_INSTRUMENT token used to eagerly inject providers (#57) (b90df34)
• Effects: Start child effects after running root effects (#43) (931adb1)
• Effects: Use Actions generic type for the return of the ofType operator (d176a11)
• Example: Fix Book State interface parent (#90) (6982952)
• example-app: Suppress StoreDevtoolsConfig compiler warning (8804156)
• omit: Strengthen the type checking of the omit utility function (3982038)
• router-store: NavigationCancel and NavigationError creates a cycle when used with routerReducer (a085730), closes #68
• Store: Exported initial state tokens (#65) (4b27b6d)
• Store: pass all required arguments to projector (#74) (9b82b3a)
• Store: Remove parameter destructuring for strict mode (#33) (#77) (c9d6a45)
• Store: Removed readonly from type (#72) (68274c9)
• StoreDevtools: Type InjectionToken for AOT compilation (e21d688)

Code Refactoring

• Effects: Simplified AP, added better error reporting and effects stream control (015107f)

Features

• build: Updated build pipeline for modules (68bd9df)
• Effects: Ensure effects are only subscribed to once (089abdc)
• Effects: Introduce new Effects testing module (#70) (7dbb571)
• router-store: Added action types (#47) (1f67cb3), closes #44
• store: Add 'createSelector' and 'createFeatureSelector' utils (#10) (41758b1)
• Store: Allow initial state function for AoT compatibility (#59) (1a166ec), closes #51
• Store: Allow parent modules to provide reducers with tokens (#36) (069b12f), closes #34
• Store: Simplify API for adding meta-reducers (#87) (d2295c7)

BREAKING CHANGES

• Effects: Effects API for registering effects has been updated to allow for multiple classes to be provided.

BEFORE:

@NgModule({
  imports: [EffectsModule.run(SourceA), EffectsModule.run(SourceB)],
})
export class AppModule {}

AFTER:

@NgModule({
  imports: [EffectsModule.forRoot([SourceA, SourceB, SourceC])],
})
export class AppModule {}

@NgModule({
  imports: [EffectsModule.forFeature([FeatureSourceA, FeatureSourceB, FeatureSourceC])],
})
export class SomeFeatureModule {}