State Machines

Core Principles

Always use discriminated unions with a 'status' property. State machines must be type-safe discriminated unions where each state has a unique 'status' value ('idle', 'loading', 'success', 'error'). The 'status' property enables TypeScript to narrow types and prevents accessing properties that don't exist in the current state.

Always use helper functions for safe property extraction. Never access state properties directly without checking 'status' first. Create helper functions (getIsLoading, getError, getLastSavedRecipe) that safely extract properties, returning null or false when the property doesn't exist in the current state.

Always use plain Zustand stores without middleware. State machines should be implemented as plain Zustand stores using create() without immer or other middleware. This ensures explicit state transitions and predictable updates. Use set() with function form for state updates.

Always handle all state transitions explicitly. State transitions must be explicit and intentional (idle → loading → success/error). Use switch statements with never type for exhaustive checking to ensure all states are handled. Each transition should be a distinct set() call.

Why: State machines eliminate impossible states, provide type safety, make state transitions explicit and testable, prevent race conditions, and enable predictable UI behavior through discriminated unions and helper functions.

When to Use This Skill

Use these patterns when: