+ ROBOT +
+ +
+ With Finite State Machines the term state might
+ not mean what you think. In the frontend we tend to think of state to mean all of
+ the variables that control the UI. When we say state in
+ Finite State Machines, we mean a higher-level sort of state.
+
+ For example, on the GitHub issue page, the issue titles can be edited by the issue creator + and repo maintainers. Initially a title is displayed like this: +
+ ++ The edit button (in red) changes the view so that the title is in an input for editing, + and the buttons change as well: +
+ ++ This state machine captures all the possible states our title component can be in: + viewing, editing, and saving. Each state has clear transitions to other states based + on user actions or API responses. +
+ +send('EDIT')}> + {title} +
+); +}`} + /> + ++ The resulting code is cleaner and more predictable. The state machine ensures we can't + end up in impossible states, like showing both the input and the title at once. +
++ Robot provides built-in support for state charts, allowing you to visualize and understand + complex state machines. State charts extend finite state machines with features like: +
+ +-
+
- Hierarchical states +
- Parallel states +
- History states +
- Entry and exit actions +