Skip to main content

DevTools

Elf provides built-in integration with the Redux DevTools Chrome extension.

Usage​

Install the Redux extension from the supported App stores ( Chrome, Firefox ).

And call the devtools() method:

import { devTools } from '@ngneat/elf-devtools';

devTools();

Options​

The plugin supports the following options passed as the second function parameter:

maxAge - Maximum amount of actions to be stored in the history tree.

preAction - A method that's called before each action.

actionsDispatcher - Observable of actions. For example actions created by @ngneat/effects

logTrace: Outputs a console.trace() for each action in the console.

postTimelineUpdate - A function that'll be invoked after the devtools timeline updates. For example, you can run a change detection when working with Angular:

import { ApplicationRef } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { devTools } from '@ngneat/elf-devtools';

platformBrowserDynamic()
  .bootstrapModule(AppModule).then((moduleRef) => {
    devTools({
      postTimelineUpdate: () => moduleRef.injector.get(ApplicationRef).tick()
    });
})

Display actions from @ngneat/effects​

Angular​

import { EffectsNgModule, Actions } from '@ngneat/effects-ng';
import { SampleEffects } from 'sample/sample.effect.ts';
import { devTools } from '@ngneat/elf-devtools';

export function initElfDevTools(actions: Actions) {
  return () => {
    devTools({
      name: 'Sample Application',
      actionsDispatcher: actions
    })
  };
}

@NgModule({
  imports: [
    // other modules
    EffectsNgModule.forRoot([SampleEffects]),
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      useFactory: initElfDevTools,
      deps: [Actions]
    }
  ]
})
export class AppModule {
}