README

Basic Prototype of state machines

State Machine examples:

1. Player Machine
2. Stepper Machine
3. Fetching Machine

Codesandbox -> CodeSandbox - CodeSandbox

Resources:

• Basic Library -> JavaScript State Machine
• Simple Intro to FSM -> Finite State Machine in JavaScript
• How to decide between useState, useReducer and XState -> YouTube Tutorial
• XState Intro, 3 Part Series -> Hello XState Part 1: Learning state machines for frontend web development
• Intro to XState, Medium article -> Intro to Xstate — a true state management library for react | Weekly Webtips
• Video -> XState Docs Speedrun - 2022
• State Pattern -> Refactoring Guru

XState terminology and definitions

Actions

Entry, exit, transition actions (do actions) XState has inline and serialized actions

Context

Extended state, assigning via asign(…) Reading from state.context A car can move or stop, but at the same time, it has different attributes like color, speed, length, etc.

Guards

Inline and Serialized guards Multiple guarded transitions

Final States

type final can triger onDone callback

finished: {
  type: 'final',
},
...
onDone: {
  target: '.loading',
},