Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Copy and paste into https://statecharts.github.io/xstate-viz/
const paginationMachine = Machine(
{
id: "pagination",
initial: "empty",
on: {
UPDATE_PARAMS: "debouncing"
},
onDone: { actions: "hideMoreLoader" },
states: {
empty: {},
debouncing: {
onEntry: ["setParams", "resetPage", "resetResults"],
after: {
1000: "pending"
}
},
pending: {
onEntry: "incrementPage",
invoke: {
src: "loadResults",
onDone: [
{
target: "idle",
cond: "hasMoreResults",
actions: "appendResults"
},
{ target: "done", action: "appendResults" }
],
onError: "rejected"
}
},
idle: {
on: {
MORE_LOADER_REACHED: "pending"
}
},
rejected: {
onEntry: ["setError", "decrementPage"],
onExit: "resetError",
on: {
RETRY: "pending"
}
},
done: {
type: "final"
}
}
},
{
guards: {
hasMoreResults: () => Math.random() > 0.2
},
services: {
loadResults: () =>
new Promise((resolve, reject) =>
setTimeout(Math.random() > 0.5 ? resolve : reject, 500)
)
}
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment