Unified way to "dump" snapshot on every event / entry to state?

[zacharyhansen]

Thanks for all the amazing work on this project! I am using a machine to model backend lifecycle flows that are also exposed client side and I need to store my snapshot updates after every state/event change so the machine can be restored when the user wants to interact with it next.

Currently I can do this by defining an action that fires the save request but its tedious and error prone to add it to ever on event object in the machine. I have searched the docs and discussions so apologies if I missed it but wondering if there is a better way to define a single "action" that fires for every snapshot.

This seems akin to an observable actor but I need to do this for any actor.

Bonus question: Its not entirely clear to me how to infer when a machine is in 'idle' as in there are no promise actors or invocations running that might produce a new event to auto transition a machine. In my use case, a user might submit an event to a machine that could move the machine 1 to n states forward depending on the logic for each state and I am not sure how to know when the machine is "done" automatically moving through states as the states requiring new user input are not complete states but rather the machine is waiting for the next user input event. Relevant to my backend specifically as I do not want to respond to the client till all possible auto transitions are made before showing the client their action is done and the new "resting" state of the machine

[davidkpiano]

Hey thanks for the kind words!

You can do actor.subscribe(snapshot => {/* … */}).

You can also use the inspect API for more fine-grained inspection:

// either on creation
const actor = createActor(machine, { inspect: (inspEv) => { … } });

// or after the fact
actor.system.inspect(inspEv => { … })

See the inspection docs here: https://stately.ai/docs/inspection.

---

Re: the bonus question, you can likely check that Object.keys(snapshot.children).length === 0, which indicates that no child actors are present/active.

[zacharyhansen]

You're a legend for the quick response this works great. Had one more question for you on the frontend if you have the time - I see how I can provide a machine to my components and override actions and such but I can't quite figure out how to provide that machine with the restored snapshot actor I need it to work with.

const ExisitingConnectFlow = ({
	portfolioConnectItem,
}: {
	portfolioConnectItem: PortfolioConnectItemFragment;
}) => {
	const [state, send, actorRef] = useMachine(machine, {
		snapshot: portfolioConnectItem.persistedSnapshot, // provide persisted state config object here
	});
	const [saveSnapshot] = useUpdatePortfolioConnectSnapshotMutation();

	useEffect(() => {
		const subscription = actorRef.subscribe((snapshot) => {
			saveSnapshot({
				variables: {
					id: portfolioConnectItem.id,
					persistedSnapshot: snapshot,
				},
			});
		});

		return subscription.unsubscribe;
	}, [actorRef, portfolioConnectItem.id, saveSnapshot]);

	return (
		<ConnectMachineContext.Provider
			logic={machine.provide({ // <--- not sure how to inject the restored actor from above so all child components referencing this also get the restored actor
				actions: {
					saveSnapshot: ({ context, self }) => {
						console.log('hit saveSnapshot', self.getPersistedSnapshot());
						saveSnapshot({
							variables: {
								id: portfolioConnectItem.id,
								persistedSnapshot: self.getPersistedSnapshot(),
							},
						});
					},
				},
			})}
		>
			<ConnectFlow
				onPortfolioConnectCreated={() => {
					// Already have a portfolioConnectId, no-op
				}}
			/>
		</ConnectMachineContext.Provider>
	);
};

[zacharyhansen]

This pertains to https://stately.ai/docs/xstate-react#createactorcontextlogic

It seems like I should actually invoke createActorContext(machine, { snaphsot }) in a parent component than provide this with my own provider?