Главная

Be King of your state with Angular2 State Machine

2016-11-06 в 21:51, admin, рубрики: angular2, AngularJS, javascript, statemachine

Управление состоянием своего приложения — интересная и весьма важная задача для многих приложений. Ведь от этого зависит то, насколько внятно и вменяемо будет построен пользовательский интерфейс и насколько успешным будет само приложение.

Сегодня я хотел бы рассказать об одном интересном open-source проекте, который может облегчить работу с состояниями для тех, кто решил написать или переписать свое приложение на Angular2 и думает о том, переписывать ли ему логику управления состояниями заново или стоит что-либо поискать на просторах этих ваших интернетов.

Angular2 State Machine

angular2-state-machine — это порт, с некоторыми адаптационными изменениями, javascript-state-machine на Angular2 для того, чтобы упростить переход на ng2 тех приложений, которые, так или иначе, работают с состояниями.

На данный момент существует версия на TypeScript, поскольку он, де-факто, является стандартом для ng2 приложений на данный момент.
Сама библиотека простая и небольшая, участие — приветствуется, недавно был выпущен первый релиз в npm.

Немножко кода

Установим библиотеку:

npm i angular2-state-machine --save

Дальше будем исходить из того, что у Вас уже есть рабочее ng2 приложение, пусть даже пустое, с app.component.ts.
Будем рассматривать возможности библиотеки на примере обычного светофора.

Перед тем, как начать использовать библиотеку, надо заимпортить модуль и создать саму state-machine со всеми состояниями и переходами и задать начальное состояние.

import {StateMachine, StateEvent} from './core';

let fsm = new StateMachine({
    initial: 'green',
    events: [
        new StateEvent({
            name: 'toGreen', from: ['yellow'], to: 'green'
        }),
        new StateEvent({
            name: 'toRed', from: ['yellow'], to: 'red'
        }),
        new StateEvent({
            name: 'toYellow', from: ['red', 'green'], to: 'yellow'
        })
    ]
});

Здесь мы создали state-machine на основе трех состояний светофора: Зеленый, Желтый, Красный, и дали имена самим переходам на эти состояния: 'toGreen', 'toYellow', 'toRed'.

Необходимо использовать только уникальные имена событий, иначе сервис на этапе инициализации будет выдавать ошибку: «You have to use unique names for all events».

Перед тем, как идти дальше, нужно обьяснить в двух словах, что такое StateMachine и StateEvent.
StateMachine — собственно, сам сервис, который занимается переходами из состояния в состояние.
StateEvent — типизированное событие, которое описывает переходы в state-machine.

Допустим, Ваше приложение начинается с того, что запускается зеленый свет. Спустя некоторое время, должен запуститься желтый. Для того, чтобы сменить состояние светофора, необходимо сделать следующее:

fsm.fireAction('toYellow'); // Текущее состояние - Желтый свет

Также, можно узнать текущее состояние:

fsm.getCurrent() // yellow

Если машина состояний впечатляет своими масштабами и Вы, в какой-то момент времени, хотите проверить можно ли из текущего состояние перейти в другое, определенное, состояние, то можно сделать следующее:

fsm.can('toYellow') // Error 'You cannot switch to this state'

В описанном примере Вы не можете переключить на желтый свет, потому как он уже горит.

Есть и инвертированный метод, для любителей:

fsm.cannot('toYellow') // true

Также можно узнать все доступные события указанной машины состояний:

fsm.getEvents() /*  [StateEvent({
            name: 'toGreen', from: ['yellow'], to: 'green'
        }),
        StateEvent({
            name: 'toRed', from: ['yellow'], to: 'red'
        }),
        StateEvent({
            name: 'toYellow', from: ['red', 'green'], to: 'yellow'
        })
    ]*/

Или же узнать текущее имя события на которое переход доступен: