Когда setState недостаточно: как я написал транзакционный стейт-менеджер на TypeScript

Значимый прорыв формирует отрасль ИИ: alexander_kubarski 21 минуту назад Когда setState недостаточно: как я написал транзакционный стейт-менеджер на TypeScript Простой 18 мин 471 JavaScript * Node. JS * ReactJS * TypeScript * Туториал Стейт-менеджеров в JavaScript уже столько, что идея написать ещё один выглядит немного сомнительно. Есть Redux Toolkit, Zustand, MobX, Jotai, XState и десятки менее известных библиотек.

Почти для любого способа хранить состояние уже существует готовое решение. Но все же в качестве эксперимента, решил реализовать свою идею. Изначально я не собирался делать ещё один store с методами getState, setState и subscribe.

Технические детали

Меня интересовала другая проблема. Во многих приложениях изменение состояния является не одной операцией, а целым сценарием:зарезервировать товар;списать деньги;создать заказ;отправить уведомление;обновить интерфейс. Пока всё работает, такой код выглядит как обычная последовательность await.

Но если третий шаг падает, приложение оказывается в промежуточном состоянии. Товар уже зарезервирован, деньги списаны, а заказа нет. Можно написать несколько try/catch, вручную запомнить выполненные действия и откатить их в обратном порядке.

Потом добавить повторные попытки, таймауты, логирование, подписки и историю изменений. В какой-то момент обычная функция превращается в маленький workflow engine. Так появился Staga, TypeScript-библиотека, которая объединяет реактивное состояние и многошаговые операции с компенсацией.

Отраслевые последствия

В этой статье разберу, зачем это нужно, как устроен пакет внутри, где заканчивается обычный state management и почему слово «транзакция» здесь нужно использовать осторожно. TL;DRStaga позволяет описать операцию как последовательность шагов. У каждого шага есть основная функция и необязательная компенсация: from '@staga/core'; type State = { balance: number; orders: string; }; const saga = SagaManager.

create({ balance: 1000, orders: , }); const purchase = saga . createTransaction<{ orderId: string; amount: number }>('purchase . addStep( 'debit', (state, payload) => { state.

amount; }, (state, payload) => { state. addStep( 'create-order', (state, payload) => { state. orderId); }, (state, payload) => { state.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.