State Machine

A state machine is a directed graph where nodes represent all possible states of a view or of the whole app, and where edges represent possible transitions between the states.

State machines are particularly useful when the state is very complex and involves multiple transitions.

Turnstile:

An arrow between two nodes means that it’s possible to go through one state to another via some action. All non-listed transitions are not possible. There can be a meaningful transition from a state to the same state that is marked by a circular arrow.

Here is a state machine for the storage of fetched data that is to be stored in the browser

There are four states:

  • empty - fetching has not started yet or has been canceled
  • loading - fetching is in progress
  • withData - fetching was successful
  • error - fetching failed

Backlinks