krasimir / Stent

Stent is combining the ideas of Redux with the concept of state machines.

Chat: https://gitter.im/stentjs

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.

Installation

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.

Documentaion

• Getting started
• API
  • <state object>
  • Machine.<api method>
  • <action-handler>
  • connect and disconnect
  • Middlewares
  • React integration
• examples

Debugging apps made with Stent

Stent is supported by Kuker Chrome extension. Just add the Stent emitter to your app and open the Kuker tab in Chrome's DevTools.

Must-read articles/resources

• 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

Other libraries dealing with state machines

• xstate
• machina