Nutritious Pumpkin Meal

    store-devtools-switcher
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    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.

    2020-08-05_17-41-55 (1)

    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.

    Install

    npm i store-devtools-switcher

    DownloadsWeekly Downloads

    11

    Version

    1.3.0

    License

    ISC

    Unpacked Size

    16.8 kB

    Total Files

    20

    Last publish

    Collaborators

    • yannickglt