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: "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