Visualize
your State Management with XState
Maya Shavin
@mayashavin
@mayashavin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10013449/DALL_E_2022-11-18_07.07.54_-_blue_bus.png)
On bus
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10013429/DALL_E_2022-11-18_06.50.49_-_airport_departure_hall.png)
Check-in
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10013430/DALL_E_2022-11-18_06.51.33_-_airplane_departing.png)
Arrive by air
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10013443/DALL_E_2022-11-18_06.54.34_-_train_station.png)
Arrive to station
![](https://cf.bstatic.com/xdata/images/hotel/max1280x900/275008139.jpg?k=059d85e924b53a97c8427020514e9ed0805600b5a4ac5a4c4922e9aecf98aec4&o=&hp=1)
Reach the hotel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10013434/DALL_E_2022-11-18_06.53.26_-_train.png)
Travel by train
State Management
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9284319/input_fields_4x.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9284323/Screen_Shot_2022-01-24_at_13.14.15.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8227609/errorcat.gif)
- Manage conditions of an app/ component/ feature at a given session period.
- Keep consistency of data flows.
@mayashavin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10013462/Untitled-2022-01-17-1028.png)
@mayashavin
When something happens, how do the app react?
Events
Behaviors (states)
@mayashavin
State
State
State
Event
Event
Event
Finites of States
Transition using Event
State data control using Actions
@mayashavin
State machine
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8238616/event.png)
@mayashavin
Translate the diagram into actual code?
How many lines of if...else if... (or switch...case) is enough?
@mayashavin
The JS State Machines Library
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10013403/xstate-logo-441CD7B8F6-seeklogo.com.png)
@mayashavin
npm i xstate @xstate/react
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8238616/event.png)
const fetchMachine = createMachine({
id: 'fetch',
initial: 'idle',
context: { retries: 0 },
states: {
idle: {
on: {
FETCH: 'loading'
}
},
loading: {
on: {
RESOLVE: 'success',
REJECT: 'failure'
}
},
success: {
type: 'final'
},
failure: {
on: {
RETRY: {
target: 'loading',
actions: assign({
retries: (context, event) => context.retries + 1
})
}
}
}
}
});
@mayashavin
import { interpret } from 'xstate';
const machine = createMachine({/* configuration */})
const service = interpret(machine)
service.onTransition(newState => {
/* do something during transition from one state to another */
}).start();
service.send('EVENT');
import { myMachine } from '../machines/myMachine';
import { useActor, useInterpret } from '@xstate/react'
export const useMyMachine = () => {
const service = useInterpret(myMachine);
const [state, send] = useActor(service);
return [state, send];
}
React
Demo
Seeing is believing... as always
@mayashavin
React XState XState/vue XState/inspect XState/graph
Requirements
- Define state machine Wizard for cart checking out cart
- Visualize the state machine for wizard steps
- Guarding steps with condition (shipping address)
- Auto generate visual flow for the wizard
@mayashavin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9293969/Screen_Shot_2022-01-27_at_12.27.33.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10109497/wizard.png)
The Basic Flow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10013505/Screenshot_2022-11-18_at_8.07.25.png)
XState Machine Editor
@mayashavin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10013489/Screenshot_2022-11-18_at_7.54.23.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/10013501/Screenshot_2022-11-18_at_8.03.43.png)
reading IS understanding
Visualizing
@mayashavin
Why Xstate?
@mayashavin
- Separate machine logic that can be reused everywhere
- Keep the UI isolated
- Easy to modify states
- Readability
- Easy to test & maintain
- Lightweight & can combine with other libraries (Pinia)
- Easy to visualize and plan ahead
Plan first, code later
@mayashavin
REsources
@mayashavin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9292777/FGpaETiXsA0XGMK.jpeg)
A LITTLE BIT about me
Senior Software Engineer
MICROSOFT
Core Team
STOREFRONT-UI
Organizer
VUEJS ISRAEL
Blogger & Book Author
@mayashavin
mayashavin.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9048077/google_developers_logomark_color.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9048132/colored-text.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9291607/download.png)
Thank you
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9292751/tIkowD4.gif)
@mayashavin
mayashavin.com
Visualize your state management with XState - Frontend bound
By Maya Shavin
Visualize your state management with XState - Frontend bound
- 378