paginationMachine.js

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