Skip to content
This repository was archived by the owner on Jan 18, 2024. It is now read-only.

Commit ba79c89

Browse files
wesleygrimesbrandonroberts
authored andcommitted
docs(store-devtools): added documentation for new extension options for Store Devtools (ngrx#1533)
Closes ngrx#1519
1 parent d532979 commit ba79c89

File tree

1 file changed

+69
-13
lines changed
  • projects/ngrx.io/content/guide/store-devtools

1 file changed

+69
-13
lines changed
Lines changed: 69 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,87 @@
11
# Instrumentation options
22

3-
When you call the instrumentation, you can give an optional configuration object:
3+
When you call the instrumentation, you can give an optional configuration object. As stated, each property in the object provided is optional.
44

5-
## maxAge
5+
## Configuration Object Properties
66

7-
number (>1) | false - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. Default is `false` (infinite).
7+
### `maxAge`
88

9-
## logOnly
9+
number (>1) | `false` - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. Default is `false` (infinite).
10+
11+
### `logOnly`
1012

1113
boolean - connect to the Devtools Extension in log-only mode. Default is `false` which enables all extension [features](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#features).
1214

13-
## name
15+
### `name`
1416

15-
string - the instance name to be showed on the monitor page. Default value is _NgRx Store DevTools_.
17+
string - the instance name to show on the monitor page. Default value is NgRx Store DevTools.
1618

17-
## monitor
19+
### `monitor`
1820

1921
function - the monitor function configuration that you want to hook.
2022

21-
## actionSanitizer
23+
### `actionSanitizer`
24+
25+
function - takes `action` object and id number as arguments, and should return an `action` object.
26+
27+
### `stateSanitizer`
28+
29+
function - takes `state` object and index as arguments, and should return a `state` object.
30+
31+
### `serialize`
32+
33+
- options
34+
- `undefined` - will use regular `JSON.stringify` to send data
35+
- `false` - will handle also circular references
36+
- `true` - will handle also date, regex, undefined, primitives, error objects, symbols, maps, sets and functions
37+
- object - which contains `date`, `regex`, `undefined`, `NaN`, `infinity`, `Error`, `Symbol`, `Map`, `Set` and `function` keys. For each of them, you can indicate if they have to be included by setting them to `true`. For function keys, you can also specify a custom function which handles serialization.
38+
39+
For more detailed information see [Redux DevTools Serialize](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#serialize)
40+
41+
### `actionsBlacklist` / `actionsWhitelist`
42+
43+
array of strings as regex - actions types to be hidden / shown in the monitors, [more information here](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#actionsblacklist--actionswhitelist).
44+
45+
### `predicate`
46+
47+
function - called for every action before sending, takes state and action object, and returns `true` in case it allows sending the current data to the monitor, [more information here](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#predicate).
2248

23-
function - takes `action` object and id number as arguments, and should return `action` object back.
49+
### `features`
2450

25-
## stateSanitizer
51+
configuration object - containing properties for features than can be enabled or disabled in the browser extension Redux DevTools. These options are passed through to the browser extension verbatim. By default, all features are enabled. For more information visit the [Redux DevTools Docs](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#features)
2652

27-
function = takes `state` object and index as arguments, and should return `state` object back.
53+
```typescript
54+
features: {
55+
pause: true, // start/pause recording of dispatched actions
56+
lock: true, // lock/unlock dispatching actions and side effects
57+
persist: true, // persist states on page reloading
58+
export: true, // export history of actions in a file
59+
import: 'custom', // import history of actions from a file
60+
jump: true, // jump back and forth (time travelling)
61+
skip: true, // skip (cancel) actions
62+
reorder: true, // drag and drop actions in the history list
63+
dispatch: true, // dispatch custom actions or action creators
64+
test: true // generate tests for the selected actions
65+
},
66+
```
2867

29-
## serialize
68+
## Example Object as provided in module imports
3069

31-
false | configuration object - Handle the way you want to serialize your state, [more information here](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#serialize).
70+
<code-example header="app.module.ts">
71+
@NgModule({
72+
...
73+
imports: [
74+
...
75+
StoreDevtoolsModule.instrument({
76+
maxAge: 25,
77+
logOnly: false,
78+
features: {
79+
pause: false,
80+
lock: true,
81+
persist: true
82+
}
83+
})
84+
],
85+
...
86+
})
87+
</code-example>

0 commit comments

Comments
 (0)