Skip to content

Instantly share code, notes, and snippets.

@robertovg
Created March 24, 2020 10:38
Show Gist options
  • Save robertovg/20e0fcc80a795f29f66116ac7f1ff2a7 to your computer and use it in GitHub Desktop.
Save robertovg/20e0fcc80a795f29f66116ac7f1ff2a7 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
const fetchMachine = new Machine({
id: 'dataMachine',
devTools: true,
initial: 'loading',
context: {
data: [],
},
states: {
loading: {
invoke: {
id: 'dataLoader',
src: (context, _event) => {
return (callback, _onEvent) => {
setTimeout(() => {
const { data } = context
const newData = allData.slice(data.length, data.length + perPage)
const hasMore = newData.length === perPage
if (hasMore) {
callback({ type: 'DONE_MORE', newData })
} else {
callback({ type: 'DONE_COMPLETE', newData })
}
}, 1000)
}
},
},
on: {
DONE_MORE: {
target: 'more',
actions: assign({
data: ({ data }, { newData = [] }) => [...data, ...newData],
}),
},
DONE_COMPLETE: {
target: 'complete',
actions: assign({
data: ({ data }, { newData = [] }) => [...data, ...newData],
}),
},
FAIL: 'failure',
},
},
more: {
on: {
LOAD: 'loading',
},
},
complete: { type: 'final' },
failure: { type: 'final' },
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment