or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

actions.mdconfiguration.mddebugging-service.mdindex.mdstate-types.md
tile.json

tessl/npm-ngrx--store-devtools

Developer tools for @ngrx/store providing comprehensive debugging and time-travel capabilities for Angular applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ngrx/store-devtools@20.0.x

To install, run

npx @tessl/cli install tessl/npm-ngrx--store-devtools@20.0.0

index.mddocs/

@ngrx/store-devtools

@ngrx/store-devtools provides comprehensive developer tools for @ngrx/store, enabling developers to debug and monitor state management in Angular applications. It integrates with Redux DevTools browser extensions to offer advanced debugging features including time-travel debugging, action inspection, state visualization, and the ability to pause, skip, lock, and export/import action histories.

Package Information

  • Package Name: @ngrx/store-devtools
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ngrx/store-devtools

Core Imports

import { StoreDevtoolsModule, provideStoreDevtools } from "@ngrx/store-devtools";

For specific functionality:

import { 
  StoreDevtools, 
  StoreDevtoolsConfig, 
  LiftedState,
  DevtoolsDispatcher,
  REDUX_DEVTOOLS_EXTENSION 
} from "@ngrx/store-devtools";

Basic Usage

NgModule Setup

import { NgModule } from "@angular/core";
import { StoreModule } from "@ngrx/store";
import { StoreDevtoolsModule } from "@ngrx/store-devtools";

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

Standalone Application Setup

import { bootstrapApplication } from "@angular/platform-browser";
import { isDevMode } from "@angular/core";
import { provideStore } from "@ngrx/store";
import { provideStoreDevtools } from "@ngrx/store-devtools";

bootstrapApplication(AppComponent, {
  providers: [
    provideStore({}),
    provideStoreDevtools({
      maxAge: 25,
      logOnly: !isDevMode(),
      autoPause: true,
    }),
  ],
});

Architecture

@ngrx/store-devtools is built around several key components:

  • Core Service: StoreDevtools service that manages devtools state and provides debugging methods
  • Configuration System: Comprehensive configuration via StoreDevtoolsConfig with feature toggles and customization options
  • Action Management: Complete set of devtools-specific actions for time-travel debugging
  • State Enhancement: LiftedState that wraps application state with devtools metadata
  • Extension Integration: Seamless integration with Redux DevTools browser extensions
  • Module Integration: Both NgModule (StoreDevtoolsModule) and standalone (provideStoreDevtools) setup options

Capabilities

Configuration and Setup

Comprehensive configuration options for customizing devtools behavior, including action filtering, state sanitization, feature toggles, and performance options.

interface StoreDevtoolsConfig {
  maxAge: number | false;
  monitor?: ActionReducer<any, any>;
  actionSanitizer?: ActionSanitizer;
  stateSanitizer?: StateSanitizer;
  name?: string;
  serialize?: boolean | SerializationOptions;
  logOnly?: boolean;
  features?: DevToolsFeatureOptions;
  actionsBlocklist?: string[];
  actionsSafelist?: string[];
  predicate?: Predicate;
  autoPause?: boolean;
  trace?: boolean | (() => string);
  traceLimit?: number;
  connectInZone?: boolean;
}

class StoreDevtoolsModule {
  static instrument(options?: StoreDevtoolsOptions): ModuleWithProviders<StoreDevtoolsModule>;
}

function provideStoreDevtools(options?: StoreDevtoolsOptions): EnvironmentProviders;

Configuration and Setup

Core Debugging Service

Main devtools service providing programmatic access to debugging functionality including time-travel operations, state inspection, and recording controls.

class StoreDevtools implements Observer<any>, OnDestroy {
  dispatcher: ActionsSubject;
  liftedState: Observable<LiftedState>;
  state: StateObservable;
  
  dispatch(action: Action): void;
  performAction(action: any): void;
  refresh(): void;
  reset(): void;
  rollback(): void;
  commit(): void;
  sweep(): void;
  toggleAction(id: number): void;
  jumpToAction(actionId: number): void;
  jumpToState(index: number): void;
  importState(nextLiftedState: any): void;
  lockChanges(status: boolean): void;
  pauseRecording(status: boolean): void;
}

Core Debugging Service

DevTools Actions

Complete set of action classes and constants for programmatic control of devtools functionality, enabling custom debugging workflows and integrations.

class PerformAction implements Action {
  readonly type = 'PERFORM_ACTION';
  constructor(public action: Action, public timestamp: number);
}

class Reset implements Action {
  readonly type = 'RESET';
  constructor(public timestamp: number);
}

class Commit implements Action {
  readonly type = 'COMMIT';
  constructor(public timestamp: number);
}

// Additional action classes: Refresh, Rollback, Sweep, ToggleAction, 
// SetActionsActive, JumpToState, JumpToAction, ImportState, 
// LockChanges, PauseRecording

DevTools Actions

State Management Types

Enhanced state structures and type definitions that provide devtools metadata alongside application state, enabling comprehensive debugging capabilities.

interface LiftedState {
  monitorState: any;
  nextActionId: number;
  actionsById: LiftedActions;
  stagedActionIds: number[];
  skippedActionIds: number[];
  committedState: any;
  currentStateIndex: number;
  computedStates: ComputedState[];
  isLocked: boolean;
  isPaused: boolean;
}

interface ComputedState {
  state: any;
  error: any;
}

interface LiftedAction {
  type: string;
  action: Action;
}

State Management Types

Extension Integration

Advanced integration components for Redux DevTools browser extension and custom dispatching.

class DevtoolsDispatcher extends ActionsSubject {}

const REDUX_DEVTOOLS_EXTENSION: InjectionToken<ReduxDevtoolsExtension>;

interface ReduxDevtoolsExtensionConnection {
  subscribe(listener: (change: any) => void): void;
  unsubscribe(): void;
  send(action: any, state: any): void;
  init(state: any): void;
  error(message: string): void;
}

type ZoneConfig = 
  | { connectInZone: true; ngZone: NgZone }
  | { connectInZone: false; ngZone: null };

function injectZoneConfig(connectInZone: boolean): ZoneConfig;

Types

type StoreDevtoolsOptions = Partial<StoreDevtoolsConfig> | (() => Partial<StoreDevtoolsConfig>);
type ActionSanitizer = (action: Action, id: number) => Action;
type StateSanitizer = (state: any, index: number) => any;
type Predicate = (state: any, action: Action) => boolean;

interface DevToolsFeatureOptions {
  pause?: boolean;
  lock?: boolean;
  persist?: boolean;
  export?: boolean;
  import?: 'custom' | boolean;
  jump?: boolean;
  skip?: boolean;
  reorder?: boolean;
  dispatch?: boolean;
  test?: boolean;
}

interface SerializationOptions {
  options?: boolean | any;
  replacer?: (key: any, value: any) => {};
  reviver?: (key: any, value: any) => {};
  immutable?: any;
  refs?: Array<any>;
}