Devtools

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

Usage

Install the Redux extension from the supported App stores ( chrome, firefox ).

Install the devtools package.

npm i @datorama/akita-ngdevtools --save-dev
import { AkitaNgDevtools } from '@datorama/akita-ngdevtools';
@NgModule({
imports: [environment.production ? [] : AkitaNgDevtools.forRoot()]
bootstrap: [AppComponent]
})
export class AppModule {}

Non-Angular Applications

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

For example, by default Akita will notify you of every store initialization. You can prevent this by passing the following option:

AkitaNgDevtools.forRoot({ actionsBlacklist: ['@@INIT'] });

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) {
this.todosStore.updateRoot({
ui: {
filter
}
});
}

Or as a function:

import { logAction } from '@datorama/akita';
updateFilter(filter: VISIBILITY_FILTER) {
logAction('Update filter');
this.store.update(...)
}

The custom actions will only be dispatched upon a store update.

Read about more dev-tools features here: