Akita

Активное состояние

Хранилище поддерживает наличие активного атрибута, содержащего идентификатор активной сущности.

Это может оказаться очень полезным в тех случаях, когда вы хотите взаимодействовать с активным в данный момент объектом.

Вот как это сделать:

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, Todo> {
  constructor() {
    super(initialState);
  }
}

Store предоставляет следующий метод для обновления активного состояния:

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

Обновит активный объект:

this.store.updateActive(active => {
  return {
    config: {
      ...active.config,
      date
    }
  }
});

• setActive(active)

Установит данный объект как активный.

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

Можно установить следующий или предыдущий объект как активный. Например:

this.store.setActive({ prev: true }); // Установит предыдущий объект как активный
this.store.setActive({ next: true } ); // Установит следующий объект как активный

По умолчанию, если активный объект является последним, и вы выбираете активировать следующий объект, он зацикливается на начале и делает первый активным. Если вы хотите отключить это поведение, установите для параметра wrap значение false:

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

Query предоставляет следующий метод для запроса активного состояния:

• selectActiveId()

Получает идентификатор активной сущности:

this.active$ = this.query.selectActiveId();

• selectActive(project: ( entity: E ) => R ) (доступно при реализации ActiveState)

Выберать активный объект:

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

Управление несколькими активными объектами

Помимо наличия одной активной сущности, бывают случаи, когда нам необходимо управлять несколькими активными сущностями. Вот как это сделать с 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, Todo> {
  constructor() {
    super(initialState);
  }
}

С этой настройкой вы получите следующие методы Store:

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

И следующие селекторы запросов:

• selectActiveId(): ID[]

Выберет список активных идентификаторы:

this.actives$ = this.query.selectActiveId(); // [1, 3, 4]

• selectActive(project: ( entity: E ) => R ): E[]

Выберет активные объекты:

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