// 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