Toggle State Machine

A simple toggle state machine that switches between On and Off states, demonstrating the most basic state machine pattern with two states and direct transitions between them.

Implementation Details

This example demonstrates the core concepts of state machines in Matchina:

• Two simple states (On and Off) with no additional data
• Direct transitions between states using string references
• Using the addEventApi helper to create a clean API for transitions

Unlike the counter example which used a single state with data, this toggle example uses two distinct states to represent the On and Off conditions.

Machine Code

machine.ts

import { createMachine, defineStates, addEventApi } from "matchina";

export const createToggleMachine = () => {
  const states = defineStates({
    On: () => ({}),
    Off: () => ({}),
  });

  // Create a machine with proper transitions
  const machine = addEventApi(
    createMachine(
      states,
      {
        On: {
          toggle: "Off",
          turnOff: "Off",
        },
        Off: {
          toggle: "On",
          turnOn: "On",
        },
      },
      states.Off() // Start in the Off state
    )
  );

  return machine;
};

export type ToggleMachine = ReturnType<typeof createToggleMachine>;

ToggleView.tsx

import { type ToggleMachine } from "./machine";

// A toggle view component that uses the enhanced ToggleMachine
export const ToggleView = ({ machine }: { machine: ToggleMachine }) => {
  // Get current state
  const currentState = machine.getState();
  const isOn = currentState.key === "On";

  return (
    <div className="flex flex-col items-center">
      <div className="text-6xl font-bold mb-4">{isOn ? "ON" : "OFF"}</div>
      <div
        className={`w-16 h-8 rounded-full p-1 flex ${
          isOn ? "bg-blue-500 justify-end" : "bg-gray-300 justify-start"
        } transition-colors duration-200 cursor-pointer mb-4`}
        onClick={() => machine.api.toggle()}
      >
        <div className="bg-white rounded-full w-6 h-6 shadow-md"></div>
      </div>
      <div className="flex space-x-2">
        <button
          className="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
          onClick={() => machine.api.turnOn()}
          disabled={isOn}
        >
          Turn On
        </button>
        <button
          className="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
          onClick={() => machine.api.turnOff()}
          disabled={!isOn}
        >
          Turn Off
        </button>
      </div>
    </div>
  );
};

index.tsx

import { useMemo } from "react";
import { ToggleView } from "./ToggleView";
import { createToggleMachine } from "./machine";

export function ToggleDemo() {
  const machine = useMemo(createToggleMachine, []);
  return <ToggleView machine={machine} />;
}

Additional Notes

• The toggle uses direct state transitions (changing from one state to another)
• The UI updates based on the current state
• This pattern is useful for modeling components with distinct behavioral modes

Next Steps

Now that you’ve seen a basic toggle machine, you might want to explore:

• Counter Example - Add numeric data to your states
• Traffic Light Example - Create a machine with more states
• Lifecycle Hooks - Add behavior when states change