Be King of your state with Angular2 State Machine

Managing the state of your application is an interesting and very important task for many applications. After all, it depends on how clearly and responsibly the user interface will be built and how successful the application will be.

Today I would like to talk about one interesting open-source project that can facilitate working with states for those who decide to write or rewrite their application on Angular2 and are thinking about whether to rewrite the state management logic again or is it worth it to search for open spaces of these your Internet.

Angular2 State Machine

angular2-state-machine is a port, with some adaptation changes, javascript-state-machine on Angular2 in order to simplify the transition to ng2 of those applications that, one way or another, work with states.
')
At the moment there is a version on TypeScript, since it is, de facto, the standard for ng2 applications at the moment.

The library itself is simple and small, participation is welcome, the first release in npm was recently released.

Little code

Install the library:

npm i angular2-state-machine --save 

Next we will proceed from the fact that you already have a working ng2 application, even if empty, with app.component.ts.

We will consider the possibilities of the library on the example of a regular traffic light.

Before you start using the library, you need to import the module and create the state-machine itself with all the states and transitions and set the initial state.

 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' }) ] }); 

Here we created a state-machine based on three states of a traffic light: Green, Yellow, Red, and gave the names to the transitions to these states themselves: 'toGreen', 'toYellow', 'toRed'.

It is necessary to use only unique event names, otherwise the service at the initialization stage will generate an error: “You have to use unique names for all events”.

Before going further, it is necessary to explain briefly what StateMachine and StateEvent are.

StateMachine - in fact, the service itself, which deals with transitions from state to state.

StateEvent is a typed event that describes transitions to a state-machine.

Suppose your application starts with a green light. After some time, the yellow should start. In order to change the state of the traffic light, you must do the following:

 fsm.fireAction('toYellow'); //   -   

Also, you can find out the current status:

 fsm.getCurrent() // yellow 

If the state machine is impressive in its scale and you, at some point in time, want to check whether the current state can be transferred to another, definite, state, then you can do the following:

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

In the example described, you cannot switch to yellow light, because it is already lit.

There is an inverted method for lovers:

 fsm.cannot('toYellow') // true 

You can also find out all the available events of the specified state machine:

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

Or find out the current name of the event for which the transition is available:

 fsm.getTransitions() // 'toYellow' 

If you need to go one step back:

 fsm.goToPreviousState() // 'green' 

This is how it is easy and simple, you can manage the states of your application and not rewrite everything from scratch.