Action vs Service for async operation

[viglucci]

Greetings,

In the below example (taken from the @xstate/react readme), an onFetch method is invoked in the "load" action. I have traditionally seen this use-case/example provided using services and invoke. Is there any advantage to using an action here, rather than an invoked service?

const context = {
  data: undefined
};

const fetchMachine = createMachine({
  id: 'fetch',
  initial: 'idle',
  context,
  states: {
    idle: {
      on: { FETCH: 'loading' }
    },
    loading: {
      entry: ['load'],
      on: {
        RESOLVE: {
          target: 'success',
          actions: assign({
            data: (context, event) => event.data
          })
        }
      }
    },
    success: {}
  }
});

const [state, send] = useMachine(fetchMachine, {
  actions: {
    load: () => {
      onFetch().then(res => {
        send({ type: 'RESOLVE', data: res });
      });
    }
  }
});

Compared to:

const fetchMachine = createMachine({
...
  states: {
...
    loading: {
      invoke: { 
          src: 'load',
          onDone: 'success'
      },
      on: {
        RESOLVE: {
          target: 'success',
          actions: assign({
            data: (context, event) => event.data
          })
        }
      }
    },
...
  }
});

const [state, send] = useMachine(fetchMachine, {
  services: {
    load: () => onFetch()
  }
});

Thanks

[Andarist]

For async operations its usually better to use services - and it would be better if this example wouldnt use an action for that because this can result in warnings if that promise resolves after the component has been unmounted

[viglucci]

Thanks for the reply. I'll look at submitting a PR for an update to the readme.