Devtools

Akita provides integration with the Redux dev-tools chrome extension.

Usage

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

import { ENVIRONMENT_INITIALIZER, inject, NgZone } from '@angular/core';
import { akitaDevtools, DevtoolsOptions } from '@datorama/akita';

export function provideAkitaDevtools(options: Partial<DevtoolsOptions> = {}) {
  return {
    provide: ENVIRONMENT_INITIALIZER,
    multi: true,
    useFactory() {
      return () => {
        akitaDevtools(inject(NgZone), options);
      };
    },
  };
}

If you're not using Angular, you can call the akitaDevtools function directly:

import { akitaDevtools } from '@datorama/akita';

akitaDevtools(options?);

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.

actionsBlacklist: Disallow the passed actions.

actionsWhitelist: Allow only the passed actions.

storesWhitelist: Display only the passed stores.

logTrace: Whether to output a console.trace() for each action in the console.

shallow - Whether to perform a deep compare before showing an action. sortAlphabetically

Custom Actions

By default, Akita will do its best to describe the actions that occurred, but you can always define your own actions for debugging purposes. For example:

import { action } from '@datorama/akita';

@action('Update filter')
updateFilter(filter: VISIBILITY_FILTER) {
  todosStore.update({ filter });
}

Or as a function:

import { logAction } from '@datorama/akita';

updateFilter(filter: VISIBILITY_FILTER) {
  logAction('Update filter');
  todosStore.update({ filter });
}

danger

Custom actions will only be dispatched upon a store update.