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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const searchStateChart = {
    id: 'search',
    initial: 'idle',
    context: {
      result: {}
    },
    on: {
      SEARCH: [
        {
          target: 'searching',
          cond: {
            type: 'search query has more than one character'
          }
        },
        {
          target: 'idle',
          actions: ['resetSearchResult']
        }
      ]
    },
    states: {
      idle: {},
      searching: {
        invoke: {
          src: 'searchService',
          onDone: {
            target: 'loaded',
            actions: ['storeResult']
          },
          onError: {
            target: 'failure'
          }
        }
      },
      loaded: {},
      failure: {}
    }
  };
  
  const machineConfig = {
    guards: {
      'search query has more than one character' : (context, event) => {
          return event.q.length >=2 
      }
    },
    services: {
      searchService: (_, event) => {
        return search(event.entity, {
          q: event.q
        })
      }
    },
    actions: {
      storeResult: assign({
        result: (_, event) => {
          return event.data.items
        }
      }),
      resetSearchResult: assign({
        result: () => []
      })
    }
  };
  
const searchStateMachine = Machine(searchStateChart, machineConfig);