Visualize
your State Management with XState
Maya Shavin
@mayashavin
@mayashavin
On bus
Check-in
Arrive by air
Arrive to station
Reach the hotel
Travel by train
State Management
- Manage conditions of an app/ component/ feature at a given session period.
- Keep consistency of data flows.
@mayashavin
@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
@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
@mayashavin
npm i xstate @xstate/react
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
The Basic Flow
XState Machine Editor
@mayashavin
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
A LITTLE BIT about me
Senior Software Engineer
MICROSOFT
Core Team
STOREFRONT-UI
Organizer
VUEJS ISRAEL
Blogger & Book Author
@mayashavin
mayashavin.com
Thank you
@mayashavin
mayashavin.com
Visualize your state management with XState - Frontend bound
By Maya Shavin
