Generated by XState Viz: https://xstate.js.org/viz

machine.js

const handleRequestSuccess = assign({
  results: (_ctx, event) => event.results,
  pagination: (_ctx, event) => event.pagination
});

const searchStateMachine = Machine({
  id: 'search',
  initial: 'idle',
  context: {
    pagination: null,
    results: []
  },
  states: {
    idle: {
      on: {
        CHANGE_OPTION: 'fetching',
        CHANGE_TEXT_INPUT: 'debouncing'
      }
    },
    debouncing: {
      on: {
        CHANGE_OPTION: 'fetching',
        CHANGE_TEXT_INPUT: 'debouncing',
        TEXT_INPUT_BLUR: 'fetching'
      },
      after: [{ delay: 3000, target: 'fetching' }]
    },
    fetching: {
      exit: ['clearPendingRequest'],
      entry: ['startRequest'],
      on: {
        SEARCH_REQUEST_SUCCESS: {
          target: 'idle',
          actions: [handleRequestSuccess]
        },
        SEARCH_REQUEST_FAILURE: {
          target: 'error',
          actions: ['handleRequestFailure']
        },
        CHANGE_OPTION: 'fetching',
        CHANGE_TEXT_INPUT: 'debouncing'
      },
      initial: 'fast',
      states: {
        fast: {
          after: [{ delay: 5000, target: 'slow' }]
        },
        slow: {
          type: 'final'
        }
      }
    },
    error: {
      on: {
        '': {
          target: 'idle'
        }
      }
    }
  }
});