@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

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

License: MIT

Changelog

8.0.0-rc.0 (2019-05-30)

Bug Fixes

• update signature for createSelectorFactory and createSelector to return a MemoizedSelector (#1883) (8b31da7)
• store: adjust mock store to handle selectors with props (#1878) (a7ded00), closes #1864 #1873

Features

• effects: resubscribe to effects on error (#1881) (71137e5)
• example: add examples of effects not based on the Actions stream (#1845) (3454e70), closes #1830
• router-store: add routerState config option (#1847) (d874cfc), closes #1834
• router-store: add selectors for router state (#1874) (21c67cc), closes #1854
• store: split immutibility checks in state and action checks (#1894) (c59c211)

Reverts

• store: store should fail synchronously (#1871) (59a9e6c), closes #1865

BREAKING CHANGES

• effects: Prior to introduction of automatic resubscriptions on errors, all effects had effectively {resubscribeOnError: false} behavior. For the rare cases when this is still wanted please add {resubscribeOnError: false} to the effect metadata.

BEFORE:

login$ = createEffect(() =>
  this.actions$.pipe(
    ofType(LoginPageActions.login),
    mapToAction(
      // Happy path callback
      (action) => this.authService.login(action.credentials).pipe(map((user) => AuthApiActions.loginSuccess({ user }))),
      // error callback
      (error) => AuthApiActions.loginFailure({ error })
    )
  )
);

AFTER:

login$ = createEffect(
  () =>
    this.actions$.pipe(
      ofType(LoginPageActions.login),
      mapToAction(
        // Happy path callback
        (action) => this.authService.login(action.credentials).pipe(map((user) => AuthApiActions.loginSuccess({ user }))),
        // error callback
        (error) => AuthApiActions.loginFailure({ error })
      )
      // Errors are handled and it is safe to disable resubscription
    ),
  { resubscribeOnError: false }
);

• The return type of the createSelectorFactory and createSelector is now a MemoizedSelector instead of a Selector

<a name="8.0.0-beta.2"></a>