0
# DevTools Actions
1

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

4
## Capabilities
5

6
### Core Action Classes
7

8
All devtools action classes implement the Angular Action interface with a readonly type property.
9

10
```typescript { .api }
11
/**
12
 * Wraps user actions with timestamp for devtools processing
13
 */
14
class PerformAction implements Action {
15
  readonly type = 'PERFORM_ACTION';
16
  
17
  /**
18
   * @param action - The user action to perform
19
   * @param timestamp - Timestamp when action occurred
20
   * @throws Error if action.type is undefined
21
   */
22
  constructor(public action: Action, public timestamp: number);
23
}
24
```
25

26
**Usage Example:**
27

28
```typescript
29
import { PerformAction } from "@ngrx/store-devtools";
30
import { MyAction } from "./my-actions";
31

32
const userAction = new MyAction({ data: "example" });
33
const devtoolsAction = new PerformAction(userAction, Date.now());
34
```
35

36
### State Control Actions
37

38
Actions for controlling the overall state of the devtools.
39

40
```typescript { .api }
41
/**
42
 * Refresh the devtools display
43
 */
44
class Refresh implements Action {
45
  readonly type = 'REFRESH';
46
}
47

48
/**
49
 * Reset devtools to initial state
50
 */
51
class Reset implements Action {
52
  readonly type = 'RESET';
53
  
54
  /**
55
   * @param timestamp - Timestamp when reset occurred
56
   */
57
  constructor(public timestamp: number);
58
}
59

60
/**
61
 * Rollback to previous committed state
62
 */
63
class Rollback implements Action {
64
  readonly type = 'ROLLBACK';
65
  
66
  /**
67
   * @param timestamp - Timestamp when rollback occurred
68
   */
69
  constructor(public timestamp: number);
70
}
71

72
/**
73
 * Commit current state as new baseline
74
 */
75
class Commit implements Action {
76
  readonly type = 'COMMIT';
77
  
78
  /**
79
   * @param timestamp - Timestamp when commit occurred
80
   */
81
  constructor(public timestamp: number);
82
}
83

84
/**
85
 * Remove all skipped actions from history
86
 */
87
class Sweep implements Action {
88
  readonly type = 'SWEEP';
89
}
90
```
91

92
### Action Management Actions
93

94
Actions for managing individual actions in the devtools history.
95

96
```typescript { .api }
97
/**
98
 * Toggle an action between active and inactive state
99
 */
100
class ToggleAction implements Action {
101
  readonly type = 'TOGGLE_ACTION';
102
  
103
  /**
104
   * @param id - ID of the action to toggle
105
   */
106
  constructor(public id: number);
107
}
108

109
/**
110
 * Set a range of actions as active or inactive
111
 */
112
class SetActionsActive implements Action {
113
  readonly type = 'SET_ACTIONS_ACTIVE';
114
  
115
  /**
116
   * @param start - Starting action ID
117
   * @param end - Ending action ID
118
   * @param active - Whether to set actions as active (default: true)
119
   */
120
  constructor(public start: number, public end: number, public active = true);
121
}
122
```
123

124
### Time Travel Actions
125

126
Actions for navigating through the action/state history.
127

128
```typescript { .api }
129
/**
130
 * Jump to a specific state by index
131
 */
132
class JumpToState implements Action {
133
  readonly type = 'JUMP_TO_STATE';
134
  
135
  /**
136
   * @param index - Index of the state to jump to
137
   */
138
  constructor(public index: number);
139
}
140

141
/**
142
 * Jump to a specific action by ID
143
 */
144
class JumpToAction implements Action {
145
  readonly type = 'JUMP_TO_ACTION';
146
  
147
  /**
148
   * @param actionId - ID of the action to jump to
149
   */
150
  constructor(public actionId: number);
151
}
152
```
153

154
### Import/Export Actions
155

156
Actions for importing and exporting devtools state.
157

158
```typescript { .api }
159
/**
160
 * Import a previously exported state
161
 */
162
class ImportState implements Action {
163
  readonly type = 'IMPORT_STATE';
164
  
165
  /**
166
   * @param nextLiftedState - The lifted state to import
167
   */
168
  constructor(public nextLiftedState: any);
169
}
170
```
171

172
### Recording Control Actions
173

174
Actions for controlling the recording behavior of devtools.
175

176
```typescript { .api }
177
/**
178
 * Lock or unlock state changes
179
 */
180
class LockChanges implements Action {
181
  readonly type = 'LOCK_CHANGES';
182
  
183
  /**
184
   * @param status - True to lock changes, false to unlock
185
   */
186
  constructor(public status: boolean);
187
}
188

189
/**
190
 * Pause or resume action recording
191
 */
192
class PauseRecording implements Action {
193
  readonly type = 'PAUSE_RECORDING';
194
  
195
  /**
196
   * @param status - True to pause recording, false to resume
197
   */
198
  constructor(public status: boolean);
199
}
200
```
201

202
### Action Type Constants
203

204
String constants for all devtools action types.
205

206
```typescript { .api }
207
/** Constant for PerformAction type */
208
const PERFORM_ACTION = 'PERFORM_ACTION';
209

210
/** Constant for Refresh action type */
211
const REFRESH = 'REFRESH';
212

213
/** Constant for Reset action type */
214
const RESET = 'RESET';
215

216
/** Constant for Rollback action type */
217
const ROLLBACK = 'ROLLBACK';
218

219
/** Constant for Commit action type */
220
const COMMIT = 'COMMIT';
221

222
/** Constant for Sweep action type */
223
const SWEEP = 'SWEEP';
224

225
/** Constant for ToggleAction type */
226
const TOGGLE_ACTION = 'TOGGLE_ACTION';
227

228
/** Constant for SetActionsActive type */
229
const SET_ACTIONS_ACTIVE = 'SET_ACTIONS_ACTIVE';
230

231
/** Constant for JumpToState type */
232
const JUMP_TO_STATE = 'JUMP_TO_STATE';
233

234
/** Constant for JumpToAction type */
235
const JUMP_TO_ACTION = 'JUMP_TO_ACTION';
236

237
/** Constant for ImportState type */
238
const IMPORT_STATE = 'IMPORT_STATE';
239

240
/** Constant for LockChanges type */
241
const LOCK_CHANGES = 'LOCK_CHANGES';
242

243
/** Constant for PauseRecording type */
244
const PAUSE_RECORDING = 'PAUSE_RECORDING';
245
```
246

247
### Union Types
248

249
Type unions for working with all devtools actions.
250

251
```typescript { .api }
252
/**
253
 * Union type of all devtools action classes
254
 */
255
type All = 
256
  | PerformAction
257
  | Refresh
258
  | Reset
259
  | Rollback
260
  | Commit
261
  | Sweep
262
  | ToggleAction
263
  | SetActionsActive
264
  | JumpToState
265
  | JumpToAction
266
  | ImportState
267
  | LockChanges
268
  | PauseRecording;
269
```
270

271
**Usage Examples:**
272

273
```typescript
274
import { Injectable } from "@angular/core";
275
import { Store } from "@ngrx/store";
276
import { 
277
  StoreDevtools,
278
  Reset,
279
  Commit,
280
  JumpToAction,
281
  ToggleAction,
282
  LockChanges,
283
  PauseRecording 
284
} from "@ngrx/store-devtools";
285

286
@Injectable()
287
export class DevtoolsControlService {
288
  constructor(private devtools: StoreDevtools) {}
289

290
  // Reset to initial state
291
  resetToInitialState() {
292
    const resetAction = new Reset(Date.now());
293
    this.devtools.dispatch(resetAction);
294
  }
295

296
  // Commit current state
297
  commitCurrentState() {
298
    const commitAction = new Commit(Date.now());
299
    this.devtools.dispatch(commitAction);
300
  }
301

302
  // Jump to specific action
303
  jumpToActionById(actionId: number) {
304
    const jumpAction = new JumpToAction(actionId);
305
    this.devtools.dispatch(jumpAction);
306
  }
307

308
  // Toggle action active state
309
  toggleActionState(actionId: number) {
310
    const toggleAction = new ToggleAction(actionId);
311
    this.devtools.dispatch(toggleAction);
312
  }
313

314
  // Lock all changes
315
  lockAllChanges() {
316
    const lockAction = new LockChanges(true);
317
    this.devtools.dispatch(lockAction);
318
  }
319

320
  // Unlock all changes
321
  unlockAllChanges() {
322
    const lockAction = new LockChanges(false);
323
    this.devtools.dispatch(lockAction);
324
  }
325

326
  // Pause recording
327
  pauseRecording() {
328
    const pauseAction = new PauseRecording(true);
329
    this.devtools.dispatch(pauseAction);
330
  }
331

332
  // Resume recording
333
  resumeRecording() {
334
    const resumeAction = new PauseRecording(false);
335
    this.devtools.dispatch(resumeAction);
336
  }
337
}
338
```
339

340
**Advanced Action Handling Example:**
341

342
```typescript
343
import { Injectable } from "@angular/core";
344
import { Actions, ofType } from "@ngrx/effects";
345
import { tap } from "rxjs/operators";
346
import { 
347
  PERFORM_ACTION, 
348
  JUMP_TO_STATE, 
349
  COMMIT,
350
  PerformAction,
351
  JumpToState,
352
  Commit
353
} from "@ngrx/store-devtools";
354

355
@Injectable()
356
export class DevtoolsEffectsService {
357
  constructor(private actions$: Actions) {}
358

359
  // Log all user actions performed through devtools
360
  logPerformActions$ = this.actions$.pipe(
361
    ofType(PERFORM_ACTION),
362
    tap((action: PerformAction) => {
363
      console.log(`User action performed:`, action.action);
364
      console.log(`Timestamp:`, action.timestamp);
365
    })
366
  );
367

368
  // Handle time travel navigation
369
  handleTimeTravel$ = this.actions$.pipe(
370
    ofType(JUMP_TO_STATE),
371
    tap((action: JumpToState) => {
372
      console.log(`Jumped to state index:`, action.index);
373
      // Could trigger analytics, logging, etc.
374
    })
375
  );
376

377
  // Handle state commits
378
  handleCommits$ = this.actions$.pipe(
379
    ofType(COMMIT),
380
    tap((action: Commit) => {
381
      console.log(`State committed at:`, action.timestamp);
382
      // Could trigger persistence, backup creation, etc.
383
    })
384
  );
385
}
386
```