Understanding the State machine!

What is a state machine?
The concept of the State machine comes from IoT or Hardware programming.
Imagine a simple light switch, it can either be on or off, completely predictable states.
Even a complicated system contains a few states, it will transitions
between states which takes out the unpredictable behaviour of any System.

For example, a Traffic signal () can be a state machine with the following states
• Green ()
• Red ()
• Yellow ()

and state transitions can be
Signal Starts with Green (), the initial state,
• from Green (), it can switch to Red ()
• Red () to Yellow ()
• Yellow () to Green () and so on.

so the state machine for this example will consist of
• The Initial State ()
• All the possible States Green (), Yellow (), and Red ()
• Transitions between states

How does it work?
The State machine acts as the flow chart for state transitions. There will be some actions that will result in state changes.

In our Traffic Signal () example the trigger can be the time interval between the states.
• From Green () after 60 seconds turn into Red ()
• From Red () after 30 seconds turn into Yellow ()
• From Yellow () after 10 seconds turn into Green ()
In our programming life, the transitions can happen after a button click, database
changes or some other activities is done by the user.

When to use the State Machine
A State machine can be used when you have an object with a limited number of States like a Radio Button that can be either On or Off but not both at the same time. Like our Traffic Signal example that can be either Green, Yellow, or Red but can not be Blue, Orange, or some other colour or even a combination of two different colours at the same time.

If you don’t use a state machine and you have a unit that has to decide which state it wants to show based on x flags (Boolean values) it gets. You might end up in a state where you have a unit that has to support x^2 (x to the Power of 2) states or will have that many conditions to decide what state to show and also end up in states or
transitions that it never wanted to do. so the complexity of this code is 16 or 25. But if
it is a state machine it would always be equal to 1.

A few concepts to understand about State Machine:

1. State: A State is a Properties of an Object at a given time. For example, in the case of Traffic Signal, Red, Green, or Yellow are the states of the Traffic Signal Object.
2. Transitions: Transitions are the transformations that allowed a state to jump to another. For Example, in the case of Traffic Signal Transitions can happen from Red () to Yellow () and not the other way round.
3. State Machine: A state Machine is the brain, that defines all the states of the object and the transitions between those states.

Let’s dive into the code to see it in action:
The Example will be in Javascript (React) feel free to follow along

1. 1. Start with setting up a react project
   1. npx create-react-app ./
   2.  
2. 2. Install Xstate and React Xstate Package
   1. yarn add xstate@latest --save
   2. yarn add @xstate/react --save
   3.  
3. 3. Let’s start with a simple Toggle State machine with a Button that turns on and off a Light Bulb (Image)
4.  
5. 4. We will code the state Machine First
   1. import { createMachine } from 'xstate';
   2. export const toggleButton = createMachine({
   3. initial: 'toggledOff',
   4. states: {
   5. toggledOff: {
   6. on: {
   7. TOGGLE: 'toggledOn'
   8. }
   9. },
   10. toggledOn: {
   11. on: {
   12. TOGGLE: 'toggledOff'
   13. }
   14. }
   15. }
   16. });
   17.  

In the above code, we have a simple toggleButton State Machine which starts with
Default toggleOff and on TOGGLE event it simply jumps to toggleOn event and toggleOff
State jumps to toggleOn state on TOGGLE Event.
Here, TOGGLE is our Action, we can have multiple actions and as many states and
state transitions as possible.
Out machine is ready, now let’s make our component to use and fire the Action.

import { toggleButton } from './toggleMachine';

import { useMachine } from '@xstate/react';

const SimpleStateToggle = () => {

const [current, send] = useMachine(toggleButton);

return (

<>

img src={`${current.value}.png`} alt={current.value} /><br>

<button onClick={() => send('TOGGLE')}>{current.value}</button>

</>

);

};

export default SimpleStateToggle;

In the above code, we have a simple component that renders the image based on the
current state and toggles between states on the Button Click.
Here we are using useMachine Hook provided by React XState that returns
• current: The object Holding the information about the current state.
• send: Method to fire actions.
I have created a Github Repository containing two state machines, a Simple one
from the example above and an Advanced one with a few actions and services

That was all kewl but what if we are not using ReactJS
No worries XState Library has support for VueJS, RxJS, and even Svelte.

State Machine in other Languages
State Machine is not limited to language there are various Packages available to implement state machines in your favorite language.

PHP
You may use EFTEC / StateMachineOne if you want and advanced working but for a super simple implementation, you may also use yohang/Finite package in your PHP Application.

Here is an article to get you started with state machine with PHP (example with EFTEC/StateMachineOne):
https://medium.com/cook-php/creating-a-state-machine-using-php-ddef9395430e

Kotlin for implementing State Machine in Android
You may use Tinder/StateMachine for implementing state machines in your android app using kotlin.
Here is an article to get you started with:
https://medium.com/@yolapop/implementing-state-machine-on-androidapp-634b2f75b08e

Dart for implementing State Machine in Flutter
Here are a few Dart Packages available for State Machine implementation in Flutter:
• https://github.com/Workiva/state_machine
• https://github.com/renggli/dart-statemachine