A few words about state machines
State machine is a mathematical model of computation. It's an abstract concept where the machine may have different states but at a given time fulfills only one of them. It accepts input and based on that (plus its current state) transitions to another state. Isn't it familiar? Yes, it sounds like a front-end application. That's why this model/concept applies nicely to UI development.
Disclaimer: there are different types of state machines. I think the one that makes sense for front-end development is Mealy state machine.
The library is available as a npm module so
npm install stent or
yarn add stent will do the job. There's also a standalone version here (only core functionalities) which you can directly add to your page.
- Getting started
Debugging apps made with Stent
- The Rise Of The State Machines
- You are managing state? Think twice. - an article explaining why finite state machines are important in the context of the UI development.
- Getting from Redux to a state machine - a tutorial that transforms a Redux app to an app using Stent
- Robust React User Interfaces with Finite State Machines
- Mealy state machine