Cascading named services?

[sunny-mittal]

I don't know if this is a dumb idea, but I was wondering what people's thoughts were on something like the following:

const childMachine = Machine({
  initial: 'running',
  states: {
    running: {
      invoke: { src: 'parentsService' }
    }
  }
}, {
  services: { parentsService: 'parentsService' }
})

const parentMachine = Machine({
  initial: 'loading',
  states: {
    loading: {
      invoke: {
        id: 'loading',
        src: childMachine
      }
    }
  }
}, {
  services: {
    parentsService: () => console.log('actual implementation')
  }
})

I was actually under the impression that a child machine could reference the main machine services by name already but realizing this isn't the case made me wonder if this approach could work. If there's another way to accomplish the same, I'm all ears :)

My use case is with react...I call useMachine and can pass a services object that references closure variables or methods. It'd be very convenient to be able to specify "root-level" services that can be invoked by any child and still leverage the lifecycle of an invocation (onDone, onError).

[davidkpiano]

It helps to imagine the invoked services living somewhere completely remote from the parent machine, in which case the parent service isn't accessible. So there are two ways to do what you're trying to do:

1. Create the childMachine with that service:

const childMachine = createMachine({
  // ...
}, {
  services: {
    parentsService: // same service as parent
  }
});

2. Make the parent in charge of the service. If the child wants to use it, it needs to send an event:

// ...
on: {
  EVENT_FROM_CHILD: {
    actions: send((ctx, e) => ({ type: 'SOME_EVENT' }), { to: 'loading' })
  }
}

[sunny-mittal]

That makes a lot of sense! I'm still trying to teach my brain to think in this "sharded" way. It'll click sometime :) Many thanks!