stater - Менеджер состояния

Что умеет

• Менять состояние
• Фиксировать изменения над состоянием

Используемые типы

1/** Универсальный тип описывающий изменение для любого состояния */
2type TChange<Type> = {
3  /** Действие которое произошло с ресурсом */
4  action: TAction,
5  /** Имя ресурса */
6  source: string,
7  /** Параметры ресурса */
8  params: Partial<Type>,
9};
10/** Виды действий которое произведены с ресурсом */
11type TAction = "create" | "update" | "delete";

Основные сущности

State

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

1import { state } from "stater";
2
3const item = { name: "Евгений" }; // Состояние, которым мы хотим управлять
4const stateItem = state(item);
5// Указывание имени ресурса, который редактируется, используется для привязки к универсальному событию по изменению состояния
6state.source("person");
7// Пример методов изменяющих состояние
8stateIte.set("name", "Евгений Онегин");
9stateIte.mset({ name: "Евгений Онегин" });
10// Пример методов фиксирующих изменение в состоянии
11const change = stateItem.getChange();
12const changed = stateItem.hasChange();

Более подробно смотрите описание для State

StateList

обертка над массивом из State. Создана для:

• Пакетной работы над массивом State-ов. Многие методы пробрасываются на выполнение в State, такие как asNew(), source('any_source')...
• Содержит в себе итератор, который позволяет его добавлять в цикл for of
• Исключение удаленных элементов при проходе в цикле.
• Получения всех изменений в списке
• Фиксация события добавления нового элемента в список

1import { state, stateList } from "stater";
2
3const item = state({ name: "Владимир" }); // Экземпляр State
4const items = [{ name: "Евгений" }, state]; // Список состояний, которыми мы хотим управлять
5const stateItems = stateList(items);
6// Указывание имени ресурса, который редактируется, используется для привязки к универсальному событию по изменению состояния
7state.source("person");
8// Пример добавления нового элемента в список
9stateIte.add({ name: "Татьяна" });
10
11item.delete(); // Пример удаления элемента, в итератор ниже он не попадет
12for (const actor of stateItems) {
13  if (actor.get("name") === "Евгений") actor.set("name", "Евгений Онегин"); // Пример редактирования элемента в списке
14}
15
16// Пример методов фиксирующих изменения в списке состояний
17const changes = stateItem.getChanges(); // Вернет событие create над Татьяной, delete над Владимиром и update над Евгением
18const changed = stateItem.hasChange();

Более подробно смотрите описание для StateList

StateCompose

обертка над произвольным количеством состояний State и StateList. Его задача объединять поток изменений из них в один.

1import { state, stateList, compose } from "stater"
2
3const stateItem = state({  });
4const stateItems = stateList([{ ... }, { ... }]);
5const stateCompose = compose(stateItem, stateList, ...);
6// Позволяет получить изменения как:
7// Массив
8const changes = stateCompose.getChanges();
9// Итератор
10for (const change of stateCompose.getChangesIter()) { ... }
11// Итератор в виде пакетов изменений
12for (const change of stateCompose.getChangesBatch(100)) { ... }

Более подробно смотрите описание для StateCompose

onChange

Подписка на события изменения свойства объекта

1//Пример подписки на события, добавляется в агрегат
2this.item.onChange("title", {
3  // 'title' - Свойство, на которое навешивается обработчик
4  do: ({ initial, current }) => console.log("do :>> ", { initial, current }), // метод выполняется когда свойство поменялось
5  rollback: ({ initial, current }) =>
6    console.log("rollback :>> ", { initial, current }), // метод выполняется когда свойство возвратилось в исходное состояние
7});
8
9//Пример подписки на события в виде массива свойств, добавляется в агрегат
10this.item.onChange(["title", "age"], {
11  // ['title', 'age'] - Свойства, на которое навешивается обработчик
12  do: ({ initial, current }) => console.log("do :>> ", { initial, current }), // метод выполняется когда свойство поменялось
13  rollback: ({ initial, current }) =>
14    console.log("rollback :>> ", { initial, current }), // метод выполняется когда свойство возвратилось в исходное состояние
15});