DevGang
Авторизоваться

Akita

Строгий менеджер состояний для приложений на javascript

Хранилище сущностей

По большей части хранилища, которые вам потребуются в ваших приложениях, будут хранилищем сущностей.

Вы можете думать о хранилище сущностей как о таблице в базе данных, где каждая таблица представляет собой плоский набор сущностей.

EntityStore упрощает процесс, предоставляя вам все необходимое для управления им.

Давайте посмотрим, как мы можем использовать его для создания таблицы задач, то есть EntityStore, управляющего объектом Todo:

import { Todo } from './todo.model';
import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';

export interface TodosState extends EntityState<Todo> { }

@StoreConfig({ name: 'todos' })
export class TodosStore extends EntityStore<TodosState, Todo> {
  constructor() {
    super();
  }
}

Во-первых, нам нужно определить интерфейс хранилища. В нашем случае мы можем обойтись без расширения EntityState, предоставив ему тип Todo.

EntityState имеет следующую тип:

export interface EntityState<T> {
  entities: HashMap<T>;
  ids: ID[];
  loading: boolean;
  error: any;
}

Используя эту модель, вы получите много встроенных функций. Давайте рассмотрим их в следующем разделе.

Наследование от EntityStore

Иногда полезно расширить хранилище и добавить в него дополнительные свойства, например, вы можете сохранить активный фильтр задач.

Сначала нам нужно добавить тип свойства:

export interface TodosState extends EntityState<Todo> {
  filter: string;
}

Далее нам нужно передать начальное состояние в конструктор:

@StoreConfig({ name: 'todos' })
export class TodosStore extends EntityStore<TodosState, Todo> {
  constructor() {
    super({ filter: 'ALL' });
  }
}

Теперь мы получим следующее состояние:

{
  entities: HashMap<T>;
  ids: ID[];
  loading: boolean;
  error: any;
  filter: string; <====
}

Чтобы обновить расширенные свойства, вы должны использовать метод updateRoot. Например:

class TodosService {
 updateFilter(filter) {
   this.todosStore.updateRoot({
     filter: 'COMPLETED'
   });
 }
}
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться