XState
FINITE STATE MACHINE
An abstract machine that can be in exactly one of a finite number of states at any given time.
Finite-State Machine
Deterministic
Finite
Automata
Predetermined Sequence
Pure Process
(new state = state + action)
Predefined
States
http://slides.com/davidkhourshid/finite-state-machines#/16
https://medium.com/@brianray_7981/tutorial-write-a-finite-state-machine-to-parse-a-custom-language-in-pure-python-1c11ade9bd43
Adjacency list
http://slides.com/davidkhourshid/finite-state-machines#/24
First FSM
https://github.com/davidkpiano/xstate
Hierarchical (Nested) State Machines
https://github.com/davidkpiano/xstate
Parallel State Machines
https://github.com/davidkpiano/xstate
History States
https://github.com/davidkpiano/xstate
Why Finite State Machine？
http://slides.com/davidkhourshid/finite-state-machines#/9
http://slides.com/davidkhourshid/finite-state-machines#/10
CONST Foo = (m, s, a) => m[s][a]
It's Pure Function!
Common Language for
designers & developers
Eliminate
unnecessary state
Easy to Test
Reusable Logic
Fist Example
For Vue
What's wrong？
<button @click="onClick">
Fetch
</button>
//
const onClick = () => {
if (isLoading) return
fetch();
}
Example!
Example!
(WIP) XState in 5 min
By guansunyata
