Be King of your state with Angular2 State Machine

image

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

Сьогодні я хотів би розповісти про один цікавий 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'
})
]*/


Або ж дізнатися поточне ім'я події на яке перехід доступний з:
fsm.getTransitions() // 'toYellow'


Якщо необхідно перейти на крок назад:
fsm.goToPreviousState() // 'green'


Ось так, легко і просто, можна управляти станами свого додатку і не переписувати все з нуля.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.