// Copy and paste into https://statecharts.github.io/xstate-viz/ | |
const paginationMachine = Machine( | |
{ | |
id: "pagination", | |
initial: "idle", | |
states: { | |
idle: {}, | |
debouncing: { | |
onEntry: ["setParams", "resetPage", "resetResults"], | |
after: { | |
1000: "pending" | |
} | |
}, | |
pending: { | |
onEntry: "incrementPage", | |
invoke: { | |
src: "loadResults", | |
onDone: "fulfilled", | |
onError: "rejected" | |
} | |
}, | |
fulfilled: { | |
onEntry: "appendResults", | |
on: { | |
END_REACHED: "noMoreResults" | |
} | |
}, | |
noMoreResults: { | |
on: { | |
"": { | |
target: "pending", | |
cond: "hasMoreResults" | |
} | |
} | |
}, | |
rejected: { | |
onEntry: ["decrementPage", "setError"], | |
onExit: "resetError", | |
on: { | |
RETRY: "pending" | |
} | |
} | |
}, | |
on: { | |
UPDATE_PARAMS: "debouncing" | |
} | |
}, | |
{ | |
guards: { | |
hasMoreResults: () => true | |
}, | |
services: { | |
loadResults: () => | |
new Promise(r => setTimeout(r, 500)) | |
} | |
} | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment