Store Devtools Switcher

Enable/disable store entries to display in Redux DevTools on the fly from the Chrome DevTools console. Configured entries are saved in localStorage to work after refresh.

Install

npm install --save-dev store-devtools-switcher 

Usage

Just import and use the provided state sanitizer as parameter of the StoreDevtools instrument.

import { stateSanitizer } from 'store-devtools-switcher'
 
@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({}),
    StoreDevtoolsModule.instrument({
      stateSanitizer: stateSanitizer()
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

With a custom sanitizer

If you already uses a custom sanitizer, just wrap it with the store-devtools-switcher one.

import { stateSanitizer } from 'store-devtools-switcher'
 
@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({}),
    StoreDevtoolsModule.instrument({
      stateSanitizer: stateSanitizer({
        customSanitizer: myCustomSanitizer
      })
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

With store entries sorted alphabetically

You can ask for the sanitizer to sort store entries alphabetically. Store keys will be sorted in both the Redux extension and in the table displayed in the console for entries activation/deactivation.

Root sorting

Only the first level of the store will be sorted alphabetically.

import { stateSanitizer } from 'store-devtools-switcher'
 
@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({}),
    StoreDevtoolsModule.instrument({
      stateSanitizer: stateSanitizer({
        sortKeys: 'root'
      })
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Deep sorting

The store will be deeply sorted.

import { stateSanitizer } from 'store-devtools-switcher'
 
@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({}),
    StoreDevtoolsModule.instrument({
      stateSanitizer: stateSanitizer({
        sortKeys: 'root'
      })
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

⚠ Deep sorting can affect performances if numerous/large states are displayed simultaneously.

With a default configuration

Some entries can hidden by default. Disabled entries can be enabled again from the console table.

import { stateSanitizer } from 'store-devtools-switcher'
 
@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({}),
    StoreDevtoolsModule.instrument({
      stateSanitizer: stateSanitizer({
        defaultConfig: {
          disabledKeys: ['scoreboard3']
        }
      })
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Try it out

Checkout the example from Github or watch it on Stackblitz.