Same service, but different actions

[sebastienbarre]

To quote the doc: "Actions are fire-and-forget effects. For a machine to be useful in a real-world application, effects need to occur to make things happen in the real world, such as rendering to a screen."

Why is it therefore not possible to create two instances of a machine service with different actions?

As a use case, I want to share the same service between two different UI component, but with different side effects for each UI component...

Thanks

[davidkpiano]

Why is it therefore not possible to create two instances of a machine service with different actions?

The service is the instance. You create different instances by making separate interpret(...) calls:

const service1 = interpret(machine); // default actions 
const service2 = interpret(machine.withConfig({
  actions: {/* other actions */}
});

[Andarist]

Just a note - don't check state within an effect unless you are absolutely sure that it is what you need.

React might batch renders and by checking state within an effect you might "miss" some states. With state machines, it's usually better to encode your logic within the machine itself.

[sebastienbarre]

@Andarist thanks, I didn't know that. Is there another way to do it? As you can see, I would like to encode my logic in the machine, but I can't, I need the service to be shared by 2 UI components, and I want the same transition to trigger a different side-effect (aka action) for each component. In other words, the React components are happily tracking the same machine going from state to state, but side effects are up to each component (the state machine services, in this case, are shared, I don't need them to be different; it's the side effect actions: I need to be per-component).

So the only information I'm left to work with, is the state returned by useService...

[davidkpiano]

To mitigate the potential issue that @Andarist mentioned, you can subscribe directly:

useEffect(() => {
  return service.subscribe(state => {
    state.actions.forEach(action => {/* execute */})
  }).unsubscribe;
}, [service]);

Any sort of helper would basically be doing that, and that's how you can do it as well. For example:

// ...
state.actions.forEach(action => {
  switch (action.type) {
    case 'focus':
      inputRef.current.focus();
      break;
    default:
      break;
  }
});

Try that out for now.

[sebastienbarre]

@davidkpiano @Andarist thanks a lot for your time and input.

[sebastienbarre]

@davidkpiano now that I have played with your example, I'm realizing that state.actions is not what I thought it was; I thought it was related to the machine actions: setting, but not at all. The only actions I see in state.actions while playing with my machine are of type xstate.start and xstate.stop. I'm having trouble finding documentation about it, except here.

My gut feeling is that if an action type is xstate.stop, and the action's activity's src matches the source in my machine config which would have the action I wish could be unique per component, then this implies the source has terminated successfully. In other words this would be one way to know when the "per-component action" would have been triggered, had it been possible in the first place. So that's probably the time for me to execute my code. I tried it and it seems to work, thanks!

in my machine:

    LOGGING_TIMERS: {
        invoke: {
          src: 'logTimers',
          onDone: {
            target: 'IDLE',
            actions: ['onLogTimersCompleted'],
          },
          onError: 'IDLE',
        },
      },

In this example, onLogTimersCompleted is the action I wish could be different per component sharing the same state machine service instance, since in my app two components of mine will have different side effects after the successful completion of logTimers.
If I remove the actions: from that state, I can instead do this in my component:

  useEffect(() => {
    return timeChargingService.subscribe((state) => {
      state.actions.forEach((action) => {
        if (action.type === 'xstate.stop' && action.activity.src === 'logTimers') {
          console.log('timers were logged, time for our additional async stuff');
          ...
        }
      });
    }).unsubscribe;
  }, [timeChargingService]);