Active State

The store supports having an active attribute, holding the active entity's id.

This can prove to be very useful in cases where you want to interact with the entity that is currently active.

Here's how to set it up:

import { EntityState, ActiveState, StoreConfig } from '@datorama/akita';
export interface TodosState extends EntityState<Todo>, ActiveState {
}
const initialState = {
active: null
};
@StoreConfig({ name: 'todos' })
export class TodosStore extends EntityStore<TodosState> {
constructor() {
super(initialState);
}
}

The Store provides the following method to update the active state:

  • updateActive(newStateFn: ((entity: Readonly<E>) => Partial<E>) | Partial<E>)

Update the active entity:

this.store.updateActive(active => {
return {
config: {
...active.config,
date
}
}
});
  • setActive(active) Set the given entity as active.

this.store.setActive(activeId);
store.setActive(null);

It’s possible to set the next or previous entity as active. For example:

this.store.setActive({ prev: true }); // Set the prev entity as active
this.store.setActive({ next: true } ); // Set the next entity as active

By default, if the active entity is the last one and you select to activate the next entity, it will loop to the beginning and make the first one active. If you want to disable this behavior set the wrap parameter to false:

this.store.setActive({ next: true, wrap: false });

The Query provides the following method to query the active state:

  • selectActiveId()

Select the active entity's id:

this.activeId$ = this.query.selectActiveId();
  • selectActive(project: ( entity: E ) => R ) (available when ActiveState is implemented) Select the active entity:

this.active$ = this.query.selectActive();
this.active$ = this.query.selectActive(active => active.title);

Getters

  • getActiveId() : ID

Get the active entity's id:

this.activeId = this.query.getActiveId();
  • getActive(): E

Get the active entity:

this.active = this.query.getActive();
  • hasActive(): boolean

Whether an active entity is set.

if(this.query.hasActive()) { }
if(this.query.hasActive(id)) { }

Managing Multiple Active Entities

In addition to having one active entity, there are times when we need to manage multiple active entities. Here is how to do it with Akita:

import { EntityState, MultiActiveState, StoreConfig } from '@datorama/akita';
export interface TodosState extends EntityState<Todo>, MultiActiveState {
}
const initialState = {
active: []
};
@StoreConfig({ name: 'todos' })
export class TodosStore extends EntityStore<TodosState> {
constructor() {
super(initialState);
}
}

With this setup you'll get the following Store methods:

store.setActive([1, 2, 33]);
store.addActive(4);
store.removeActive(1);
store.toggleActive(44);

And the following Query selectors:

  • selectActiveId(): ID[]

Select the active entities ids:

this.actives$ = this.query.selectActiveId(); // [1, 3, 4]
  • selectActive(project: ( entity: E ) => R ): E[] Select the active entities:

this.actives$ = this.query.selectActive(); /// [E, E]