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


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

Install the devtools package:

npm i @datorama/akita-ngdevtools

And add the AkitaNgDevtools module:

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

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

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


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 });

Custom actions will only be dispatched upon a store update.