xstate v5: a "before stop" action?

[boneskull]

I have two machines, A and B. A is the "root" machine. B is stateless and only sends & receives events.

A spawns B in response to an event. In response to a later event, A stops B via stopChild().

Is it possible to configure B such that it executes a final action just before it is stopped--e.g., log that it is stopping?

Would I need to add states to B to make something like this work? For example, send an event from A to B which causes B to enter a final state, then call stopChild() after?

I've tried adding an exit action to B's config, but it does not execute; I don't understand what an exit action is supposed to do if it is not associated with a particular state.

[davidkpiano]

I suppose an onStop: { … } transition could be helpful here (cc. @Andarist)

[boneskull]

Thanks. Regarding my last question above,

I don't understand what an exit action is supposed to do if it is not associated with a particular state.

Given a machine without any state, I'm still unclear why this is the way it is:

const machine = createMachine({
  entry: 'hello',
  exit: 'goodbye',
  // anything else
})

It appears that when the machine is created, the hello action will be executed. But the goodbye action will never be executed, right? Is there any case in which the exit action makes sense at the top-level? If not, why couldn't exit be used as onStop?

[davidkpiano]

A top-level exit action is called when the machine reaches a top-level final state; i.e. when the machine completes.

[krambono]

I'm looking for the same thing. The onStop callback would be nice. My use case is to access context just before stopping the actor and clear some subscriptions that are in my context.

[davidkpiano]

I'm looking for the same thing. The onStop callback would be nice. My use case is to access context just before stopping the actor and clear some subscriptions that are in my context.

You can use a completion handler in an observer for this:

actor.subscribe({
  complete: () => {
    console.log('The actor is stopped');
  }
});

[krambono]

Thanks for the response! I didn't know about this way to do it.

I achieved my goal in a similar way.

You can find an example here:
https://stackblitz.com/edit/xstate-counter-umount-bxd4s4?file=src%2FCounter.tsx
This example shows a component with a counter. When you start the counter, an interval increments it every x second. When unmounting the component, I would like to clear the interval.

So, I could put the logic of clearing my interval like I did in the example, or maybe with the solution you gave me just before.

However, I would prefer to put that logic inside my machine definition. Therefore, it's not the responsibility of the subscriber to handle the clearing of my interval.

That's why an onStop: { … } transition would perfectly fit my needs.

[boneskull]

@davidkpiano @Andarist Regarding a potential onStop transition, where exactly would this want to live?

It looks like StateNodeConfig would be appropriate, but I'm not sure if it needs to also be present in DistributeActors, StateSchema and/or AtomicStateNodeConfig.

[krambono]

@boneskull, could I help with this?
Is this issue a good entry point for me to contribute?

[LuPeter]

@boneskull, could I help with this? Is this issue a good entry point for me to contribute?

Hi @krambono , I get the same issue here, is there any workaround for now?
How do I let the child actor know that it is about to stop and let it clean up on its own?

[krambono]

Hi @LuPeter,

Just look at @chrisregner's response below.

It's the only solution I know of at the moment for the actor to clean up on its own.

[LuPeter]

Hi @krambono ,
Okay, thank you, I'm just curious if there is any other way to solve it.

[boneskull]

@krambono Feel free to work on it

[chrisregner]

I was in same position, I'm looking to do all states and logic on xstate and avoid putting logic directly on react comopnents.

This is not very pretty but I did manage move the cleanup logic from component back to xstate

In the actions

...
actions: {
  prepareCleanup: ({ self }) => {
    const sub = self.subscribe({
      complete: () => {
        doCleanupStuff()
        sub.unsubscribe()
      },
    })
  },
},
...
entry: [{ type: 'prepareCleanup' }]
...