react-state-flowslisted

# Complex State Flows ## Problem Statement Multi-step operations with dependencies between steps are prone to ordering bugs, missing preconditions, and untested edge cases. Even without a formal state machine library, thinking in states and transitions prevents bugs. --- ## Pattern: State Machine Thinking **Problem:** Complex flows have implicit states that aren't modeled, leading to invalid transitions. **Example - Checkout flow states:** ``` IDLE → VALIDATING → PROCESSING_PAYMENT → CONFIRMING → COMPLETE ↓ ERROR ``` **Each transition should have:** 1. **Preconditions** - What must be true before this step 2. **Action** - What happens during this step 3. **Postconditions** - What must be true after this step 4. **Error handling** - What to do if this step fails ```typescript // Document the flow explicitly /* * CHECKOUT FLOW * * State: IDLE * Precondition: cart exists with items * Action: validateCart * Postcondition: cart validated, prices confirmed * * State: VALIDATING * Precondition: cart validated * Action: processPayment * Postcondition: payment authorized * * State: PROCESSING_PAYMENT * Precondition: payment authorized * Action: confirmOrder * Postcondition: order created, confirmation number assigned * * ... continue for each state */ ``` --- ## Pattern: Explicit Flow Implementation **Problem:** Flow logic scattered across mult