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 = {
cart: { checkout: 'shipping' },
shipping: { submitAddress: 'payment', back: 'cart' },
payment: { submitPayment: 'review', back: 'shipping' },
review: { confirm: 'processing', back: 'payment' },
processing: { success: 'complete', failure: 'payment' },
complete: {},
8};
9 
10class CheckoutMachine extends EventTarget {
constructor(state = 'cart', context = {}) {
  super();
  this.state = state;
  this.context = context;
}
16 
can(action) {
  return action in (transitions[this.state] ?? {});
}
20 
dispatch(action, payload = {}) {
  const next = transitions[this.state]?.[action];
  if (!next) {
    throw new Error(`Invalid action "${action}" from state "${this.state}"`);
  }
26 
  const from = this.state;
  this.context = { ...this.context, ...payload };
  this.state = next;
30 
  this.dispatchEvent(
    new CustomEvent('transition', {
      detail: { from, to: next, action, context: this.context },
    })
  );
36 
  return this.state;
}
39 
get isTerminal() {
  return Object.keys(transitions[this.state] ?? {}).length === 0;
}
43}
44 
45export { CheckoutMachine, transitions };

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Encoding allowed transitions as data keeps the state logic declarative and easy to audit.
2Looking up the next state before mutating lets you reject invalid actions cleanly.
3Extending EventTarget gives observers a standard way to react to each transition.

Related explainers

php

<?php
 
namespace App\Services\Checkout;

Validating coupons with Laravel's Pipeline

pipeline chain of responsibility transactions

Intermediate 7 steps

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

php

<?php
 
namespace App\Services;

How a password strength validator works in PHP

validation regular-expressions data-driven

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

rust

use chrono::{Duration, NaiveDate};
 
#[derive(Debug)]
pub struct DateRange {

Parsing and iterating date ranges in Rust

error-handling iterators parsing

Intermediate 7 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);