When to persist state?

[doender]

I'm working with XState in the backend for managing some complex state flows.
Everytime an operation is requested by the client, like withdrawing or adding info to a case, I'm fetching the case from the database and initializing based on the current state using:

const resolvedState = machine.resolveState({ value: aCase.state });
const actor = createActor(machine, { snapshot: resolvedState, input: { case: aCase } });

In the controller, I then send an event to the actor and wait for a certain state to be reached.
This setup seems to work nicely.

My concern is when to persist a new state to the database.
For example, we have a state transition from waiting -> withdrawn based on the event withdraw.
However, I only want to go to the state 'withdrawn' after updating the state in the database. I cannot use an action for this because it's async. My current solution is to have an intermediate state withdrawing in which I invoke an actor that persists the state. Using onDone we'll then transition to withdrawn. However, this solution feels rather clumsy because now we have to create such an intermediate state for every transition in the FSM.

Is there a better way to solve this?

[doender]

After watching https://www.youtube.com/watch?v=NVE77_axR6s I've been thinking about it in the wrong way

[tamlyn]

Thanks. Summary for those like me who don't like videos:

Use actor.subscribe and pass in the following handlers:

• next - this signifies a state transition and you should persist your state here
• error - an unhandled error occurred
• complete - the state machine has reached a final state