javascript 45 lines · 7 steps

A finite state machine for checkout flow

A lookup table of states and actions drives valid transitions, emitting events on every move.

Explained by highlit
Intermediate state-machine event-driven data-driven-design validation
1const transitions = {
2 cart: { checkout: 'shipping' },
3 shipping: { submitAddress: 'payment', back: 'cart' },
4 payment: { submitPayment: 'review', back: 'shipping' },
5 review: { confirm: 'processing', back: 'payment' },
6 processing: { success: 'complete', failure: 'payment' },
7 complete: {},
8};
9 
10class CheckoutMachine extends EventTarget {
11 constructor(state = 'cart', context = {}) {
12 super();
13 this.state = state;
14 this.context = context;
15 }
16 
17 can(action) {
18 return action in (transitions[this.state] ?? {});
19 }
20 
21 dispatch(action, payload = {}) {
22 const next = transitions[this.state]?.[action];
23 if (!next) {
24 throw new Error(`Invalid action "${action}" from state "${this.state}"`);
25 }
26 
27 const from = this.state;
28 this.context = { ...this.context, ...payload };
29 this.state = next;
30 
31 this.dispatchEvent(
32 new CustomEvent('transition', {
33 detail: { from, to: next, action, context: this.context },
34 })
35 );
36 
37 return this.state;
38 }
39 
40 get isTerminal() {
41 return Object.keys(transitions[this.state] ?? {}).length === 0;
42 }
43}
44 
45export { CheckoutMachine, transitions };
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Encoding allowed transitions as data keeps the state logic declarative and easy to audit.
  2. 2Looking up the next state before mutating lets you reject invalid actions cleanly.
  3. 3Extending EventTarget gives observers a standard way to react to each transition.

Related explainers

go 
package main
 
import (
	"errors"

Parsing and validating CLI flags in Go

cli-parsing validation error-handling
Intermediate 8 steps
javascript 
'use server'
 
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

How a Next.js Server Action updates a post

server-actions authorization validation
Intermediate 7 steps
javascript 
const express = require('express');
 
const v1 = express.Router();
 

Versioning an API with Express Routers

api versioning routing modularity
Intermediate 10 steps
php 
<?php
 
namespace App\Support;
 

Merging query params onto a URL in PHP

url-parsing query-strings immutability
Intermediate 8 steps
javascript 
const RATE_LIMIT = 100;
const WINDOW_MS = 60 * 1000;
const BLOCK_MS = 5 * 60 * 1000;
 

Building a rate-limiting middleware in Express

rate-limiting middleware closures
Intermediate 9 steps
python 
from django.conf import settings
from django.contrib.auth import get_user_model
from django.core.mail import EmailMultiAlternatives
from django.db.models.signals import post_save

Sending a welcome email with Django signals

signals email user-activation
Intermediate 8 steps

Share this explainer

Here's the card — post it anywhere.

A finite state machine for checkout flow — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code