How to get a list of changes that will be made in the result of an event?

[kulesa]

My use-case is a complex multi-page web form backed by a hierarchical state machine. In certain cases, I want to show the user a confirmation screen with a list of changes that will be made in the result of a user action. Something like "clicking 'Activate' will change state A to 'active', state B to 'disabled', state C to 'pending', and will trigger actions 'send emails to project owner,' 'publish an updated PDF', and 'queue emails to participants'".

Basically, I want to get a list of state changes and actions that will be executed in the result of an event without actually sending the event. And because this logic is already described in the form of a state machine I thought maybe there is a smart way to get this info from the graph?

One way I can think of is to create a copy of the machine where all actions are replaced with a function that stores the action name somewhere without actually executing the action, and then send the event to this copy of the machine and then check the resulting states and the list of "executed" actions and use the copy to render the confirmation screen? Or maybe add a confirmation state to each of the machines, and somehow build the list of resulting states and exit actions while transitioning to confirmation?

I'd appreciate any thoughts and ideas!

[davidkpiano]

Easier than you think:

// Pure function; will not execute actions!
const nextState = machine.transition(currentState, event);

// Display this however you'd like
console.log(nextState.actions);

[kulesa]

Wow that's a relief! So much easier than what I had in mind. 😄 Thank you!