Xstate: Multiple service action not being called

[GustavoCarvalho]

Description
I am calling three services at the same time, each being a request in a different API peer. My third party's action is not being called on OnDone.

Expected Result
Call cacheSectors, cacheTifs, and cacheTypes.

Actual Result
Just calling cacheSectors and cacheTifs.

Reproduction
https://codesandbox.io/embed/actions-xstate-not-calling-0t79l

Additional context

pending_labels: {
      invoke: [
        { 
          id: 'service_sectors_id', 
          src: 'requestSectors',
          onDone: { 
            target: 'ready',
            actions: 'cacheSectors'
          },
          onError: {
            actions: 'cacheSectorsError'
          }
        },
        { 
          id: 'service_tifs_id', 
          src: 'requestTifs',
          onDone: { 
            target: 'ready',
            actions: 'cacheTifs'
          },
          onError: {
            actions: 'cacheTifsErros'
          }
        },
        { 
          id: 'service_types_id', 
          src: 'requestTypes',
          onDone: { 
            target: 'ready',
            actions: 'cacheTypes'
          },
          onError: {
            actions: 'cacheTypesErros'
          }
        }
      ],
    },

[GustavoCarvalho]

Callbacks occur at different times, coincidentally, two occurred at the same time. I am looking for a way to do this correctly. Once all returns are ok, I will go to the next state.

[davidkpiano]

Did you mean to close this?

[GustavoCarvalho]

Yes, that is ok. I solved it with:

states: {
    pending_labels: {
      type: 'parallel',
      states: {
        load_sectors: {
          type: 'compound',
          initial: 'pending',
          states: {
            pending: {
              invoke: { 
                id: 'service_sectors_id', 
                src: 'requestSectors',
                onDone: {
                  actions: 'cacheSectors',
                  target: 'success'
                },
                onError: {
                  actions: 'cacheSectorsError'
                }
              }
            },
            success: {
              type: 'final'
            }
          }
        },...
        onDone: 'nextState'

[davidkpiano]

You can abstract into a helper function too. Would love to see it if you do!

[GustavoCarvalho]

Thanks for the tip, I still have a lot to learn from Xstate, there are few questions that I started studying about it and I already have a project in progress that using it.

But if you want to help me, I'm open to new learning ... As I have several services to call, how can I abstract this?

[Andarist]

You can check out how I've implemented a "serial" helper here - https://github.com/davidkpiano/xstate/issues/688#issuecomment-537181131 . This (a state factory) can easily be done for "parallel" requests in a similar manner.