paginationMachine.js

// 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)
        )
    }
  }
);