A state transition moves a state machine from one state to another in response to an event or condition. Only transitions leaving the current state are available, while actions can update contextual data without changing state. section 8.7 section 8.7.1
Implementation decisions become clearer when transitions are separated into state flow, events, and data updates:
- Restrict events by state: adding belongs to list view, removing belongs to detail view, and viewing changes between the two. section 8.7.1
- Use distinct event names when identical user intentions require different behavior, such as DO_THAT in list view and DO_THIS in detail view. section 8.7.1
- Attach actions to transitions for context updates, such as selecting the current item, adding an item, or recording completion history. section 8.7.1
- Expose machine data through selectors and expose event dispatch through send functions, keeping React hooks focused on application-specific operations. section 8.7.2
List/detail workflow with XState
Define list and single states with an initial list state. In list, allow ADD, DO_THAT, UNDO_THAT, and SEE; in single, allow DO_THIS, UNDO_THIS, REMOVE, and SEE_ALL. Keep things and currentThing in machine context, attach assign-based actions to transitions, and provide the service through DataProvider. Components then read selected context with useData and dispatch events with useSend. Persisting the interpreted service state to localStorage extends the transition model across reloads.
