0
# @ngrx/store-devtools
1
2
@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.
3
4
## Package Information
5
6
- **Package Name**: @ngrx/store-devtools
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @ngrx/store-devtools`
10
11
## Core Imports
12
13
```typescript
14
import { StoreDevtoolsModule, provideStoreDevtools } from "@ngrx/store-devtools";
15
```
16
17
For specific functionality:
18
19
```typescript
20
import {
21
StoreDevtools,
22
StoreDevtoolsConfig,
23
LiftedState,
24
DevtoolsDispatcher,
25
REDUX_DEVTOOLS_EXTENSION
26
} from "@ngrx/store-devtools";
27
```
28
29
## Basic Usage
30
31
### NgModule Setup
32
33
```typescript
34
import { NgModule } from "@angular/core";
35
import { StoreModule } from "@ngrx/store";
36
import { StoreDevtoolsModule } from "@ngrx/store-devtools";
37
38
@NgModule({
39
imports: [
40
StoreModule.forRoot({}),
41
StoreDevtoolsModule.instrument({
42
maxAge: 25,
43
logOnly: false,
44
autoPause: true,
45
}),
46
],
47
})
48
export class AppModule {}
49
```
50
51
### Standalone Application Setup
52
53
```typescript
54
import { bootstrapApplication } from "@angular/platform-browser";
55
import { isDevMode } from "@angular/core";
56
import { provideStore } from "@ngrx/store";
57
import { provideStoreDevtools } from "@ngrx/store-devtools";
58
59
bootstrapApplication(AppComponent, {
60
providers: [
61
provideStore({}),
62
provideStoreDevtools({
63
maxAge: 25,
64
logOnly: !isDevMode(),
65
autoPause: true,
66
}),
67
],
68
});
69
```
70
71
## Architecture
72
73
@ngrx/store-devtools is built around several key components:
74
75
- **Core Service**: `StoreDevtools` service that manages devtools state and provides debugging methods
76
- **Configuration System**: Comprehensive configuration via `StoreDevtoolsConfig` with feature toggles and customization options
77
- **Action Management**: Complete set of devtools-specific actions for time-travel debugging
78
- **State Enhancement**: `LiftedState` that wraps application state with devtools metadata
79
- **Extension Integration**: Seamless integration with Redux DevTools browser extensions
80
- **Module Integration**: Both NgModule (`StoreDevtoolsModule`) and standalone (`provideStoreDevtools`) setup options
81
82
## Capabilities
83
84
### Configuration and Setup
85
86
Comprehensive configuration options for customizing devtools behavior, including action filtering, state sanitization, feature toggles, and performance options.
87
88
```typescript { .api }
89
interface StoreDevtoolsConfig {
90
maxAge: number | false;
91
monitor?: ActionReducer<any, any>;
92
actionSanitizer?: ActionSanitizer;
93
stateSanitizer?: StateSanitizer;
94
name?: string;
95
serialize?: boolean | SerializationOptions;
96
logOnly?: boolean;
97
features?: DevToolsFeatureOptions;
98
actionsBlocklist?: string[];
99
actionsSafelist?: string[];
100
predicate?: Predicate;
101
autoPause?: boolean;
102
trace?: boolean | (() => string);
103
traceLimit?: number;
104
connectInZone?: boolean;
105
}
106
107
class StoreDevtoolsModule {
108
static instrument(options?: StoreDevtoolsOptions): ModuleWithProviders<StoreDevtoolsModule>;
109
}
110
111
function provideStoreDevtools(options?: StoreDevtoolsOptions): EnvironmentProviders;
112
```
113
114
[Configuration and Setup](./configuration.md)
115
116
### Core Debugging Service
117
118
Main devtools service providing programmatic access to debugging functionality including time-travel operations, state inspection, and recording controls.
119
120
```typescript { .api }
121
class StoreDevtools implements Observer<any>, OnDestroy {
122
dispatcher: ActionsSubject;
123
liftedState: Observable<LiftedState>;
124
state: StateObservable;
125
126
dispatch(action: Action): void;
127
performAction(action: any): void;
128
refresh(): void;
129
reset(): void;
130
rollback(): void;
131
commit(): void;
132
sweep(): void;
133
toggleAction(id: number): void;
134
jumpToAction(actionId: number): void;
135
jumpToState(index: number): void;
136
importState(nextLiftedState: any): void;
137
lockChanges(status: boolean): void;
138
pauseRecording(status: boolean): void;
139
}
140
```
141
142
[Core Debugging Service](./debugging-service.md)
143
144
### DevTools Actions
145
146
Complete set of action classes and constants for programmatic control of devtools functionality, enabling custom debugging workflows and integrations.
147
148
```typescript { .api }
149
class PerformAction implements Action {
150
readonly type = 'PERFORM_ACTION';
151
constructor(public action: Action, public timestamp: number);
152
}
153
154
class Reset implements Action {
155
readonly type = 'RESET';
156
constructor(public timestamp: number);
157
}
158
159
class Commit implements Action {
160
readonly type = 'COMMIT';
161
constructor(public timestamp: number);
162
}
163
164
// Additional action classes: Refresh, Rollback, Sweep, ToggleAction,
165
// SetActionsActive, JumpToState, JumpToAction, ImportState,
166
// LockChanges, PauseRecording
167
```
168
169
[DevTools Actions](./actions.md)
170
171
### State Management Types
172
173
Enhanced state structures and type definitions that provide devtools metadata alongside application state, enabling comprehensive debugging capabilities.
174
175
```typescript { .api }
176
interface LiftedState {
177
monitorState: any;
178
nextActionId: number;
179
actionsById: LiftedActions;
180
stagedActionIds: number[];
181
skippedActionIds: number[];
182
committedState: any;
183
currentStateIndex: number;
184
computedStates: ComputedState[];
185
isLocked: boolean;
186
isPaused: boolean;
187
}
188
189
interface ComputedState {
190
state: any;
191
error: any;
192
}
193
194
interface LiftedAction {
195
type: string;
196
action: Action;
197
}
198
```
199
200
[State Management Types](./state-types.md)
201
202
### Extension Integration
203
204
Advanced integration components for Redux DevTools browser extension and custom dispatching.
205
206
```typescript { .api }
207
class DevtoolsDispatcher extends ActionsSubject {}
208
209
const REDUX_DEVTOOLS_EXTENSION: InjectionToken<ReduxDevtoolsExtension>;
210
211
interface ReduxDevtoolsExtensionConnection {
212
subscribe(listener: (change: any) => void): void;
213
unsubscribe(): void;
214
send(action: any, state: any): void;
215
init(state: any): void;
216
error(message: string): void;
217
}
218
219
type ZoneConfig =
220
| { connectInZone: true; ngZone: NgZone }
221
| { connectInZone: false; ngZone: null };
222
223
function injectZoneConfig(connectInZone: boolean): ZoneConfig;
224
```
225
226
## Types
227
228
```typescript { .api }
229
type StoreDevtoolsOptions = Partial<StoreDevtoolsConfig> | (() => Partial<StoreDevtoolsConfig>);
230
type ActionSanitizer = (action: Action, id: number) => Action;
231
type StateSanitizer = (state: any, index: number) => any;
232
type Predicate = (state: any, action: Action) => boolean;
233
234
interface DevToolsFeatureOptions {
235
pause?: boolean;
236
lock?: boolean;
237
persist?: boolean;
238
export?: boolean;
239
import?: 'custom' | boolean;
240
jump?: boolean;
241
skip?: boolean;
242
reorder?: boolean;
243
dispatch?: boolean;
244
test?: boolean;
245
}
246
247
interface SerializationOptions {
248
options?: boolean | any;
249
replacer?: (key: any, value: any) => {};
250
reviver?: (key: any, value: any) => {};
251
immutable?: any;
252
refs?: Array<any>;
253
}
254
```