Skip to content

Instantly share code, notes, and snippets.

@kaze
Last active September 17, 2020 14:19
Show Gist options
  • Save kaze/579e50aea0572965c72506f5319f96b0 to your computer and use it in GitHub Desktop.
Save kaze/579e50aea0572965c72506f5319f96b0 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
const selector = Machine({
id: 'selector',
initial: 'inactive',
context: {
items: null,
value: null,
loaded: false,
},
states: {
inactive: {
on: {
'activate': [
{
target: 'loading',
cond: 'is_not_loaded',
},
{
target: 'active',
cond: 'is_loaded',
}
]
},
},
loading: {
on: {
'deactivate': 'inactive',
},
invoke: {
src: 'load_items',
onDone: {
target: 'active',
actions: ['set_items', 'set_loaded'],
},
},
},
active: {
on: {
'deactivate': 'inactive',
'change': {
actions: ['set_selected']
},
},
},
},
}, {
actions: {
set_items: assign({
items: (context, event) => event.data
}),
set_loaded: assign({loaded: true}),
set_selected: assign({
value: (context, event) => event.data
}),
},
guards: {
is_not_loaded: (context) => !context.loaded,
is_loaded: (context) => context.loaded
},
services: {
load_items: async () => [
{id: 1, value: 1},
{id: 2, value: 2},
{id: 3, value: 3},
{id: 4, value: 4},
],
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment