This is the archived documentation for NgRx v7. Please visit ngrx.io to see documentation for the current version of NgRx.

Instrumentation options

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

Configuration Object Properties

maxAge

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).

logOnly

boolean - connect to the Devtools Extension in log-only mode. Default is false which enables all extension features.

name

string - the instance name to show on the monitor page. Default value is NgRx Store DevTools.

monitor

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

actionSanitizer

function - takes action object and id number as arguments, and should return an action object.

stateSanitizer

function - takes state object and index as arguments, and should return a state object.

serialize

  • options

    • undefined - will use regular JSON.stringify to send data
    • false - will handle also circular references
    • true - will handle also date, regex, undefined, primitives, error objects, symbols, maps, sets and functions
    • 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.

For more detailed information see Redux DevTools Serialize

actionsBlacklist / actionsWhitelist

array of strings as regex - actions types to be hidden / shown in the monitors, more information here.

predicate

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.

features

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

features: { pause: true, // start/pause recording of dispatched actions lock: true, // lock/unlock dispatching actions and side effects persist: true, // persist states on page reloading export: true, // export history of actions in a file import: 'custom', // import history of actions from a file jump: true, // jump back and forth (time travelling) skip: true, // skip (cancel) actions reorder: true, // drag and drop actions in the history list dispatch: true, // dispatch custom actions or action creators test: true // generate tests for the selected actions },
      
      
  1. features: {
  2. pause: true, // start/pause recording of dispatched actions
  3. lock: true, // lock/unlock dispatching actions and side effects
  4. persist: true, // persist states on page reloading
  5. export: true, // export history of actions in a file
  6. import: 'custom', // import history of actions from a file
  7. jump: true, // jump back and forth (time travelling)
  8. skip: true, // skip (cancel) actions
  9. reorder: true, // drag and drop actions in the history list
  10. dispatch: true, // dispatch custom actions or action creators
  11. test: true // generate tests for the selected actions
  12. },

Example Object as provided in module imports

@NgModule({ ... imports: [ ... StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: false, features: { pause: false, lock: true, persist: true } }) ], ... })
app.module.ts
      
      
  1. @NgModule({
  2. ...
  3. imports: [
  4. ...
  5. StoreDevtoolsModule.instrument({
  6. maxAge: 25,
  7. logOnly: false,
  8. features: {
  9. pause: false,
  10. lock: true,
  11. persist: true
  12. }
  13. })
  14. ],
  15. ...
  16. })