Basic Example of Providing actor with Input & Snapshot to react component tree

[zacharyhansen]

Hi all! I think I must be missing something obvious but I cannot figure out how to properly provide an actor I create in a react application to my component tree when it depends on input / persistent snapshots.

The examples here go into detail around how to provide a machine that doesnt depend on dynamic data https://stately.ai/docs/xstate-react#createactorcontextlogic but that is not useful if we are trying to start the actor with stored snapshots or input that is dynamic to the component (i.e. a specific route or other API driven information).

Examples like the following always reference the actor directly in the same component which works but is cumbersome in complex component trees.
https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/tiles
https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/todomvc-react

What I think would be ideal / really powerful is an example of how to provide my actor to my component tree when it depends on the component driven snapshot / input. Sort of like so

const ExisitingConnectFlow = ({
	portfolioConnectItem,
}: {
	portfolioConnectItem: PortfolioConnectItemFragment;
}) => {
	const [saveSnapshot] = useUpdatePortfolioConnectSnapshotMutation();

	const actor = createActor(machine, {
		input: { portfolioConnect: portfolioConnectItem },
		snapshot: portfolioConnectItem.persistedSnapshot,
	});

	return (
		<div>
			<ConnectMachineContext.Provider
				logic={} // <--- only takes a machine logic? cant provide actual actor
			>
				// ...component tree that will pull from context to reference the actor
			</ConnectMachineContext.Provider>
		</div>
	);
};

Would the recommendation be to have my own provider to hold the actor using types via https://stately.ai/docs/typescript#actorreffromt?

[rothsandro]

The provider supports an options prop for that:

<ConnectMachineContext.Provider
  options={{ 
    input: { portfolioConnect: portfolioConnectItem },
    snapshot: portfolioConnectItem.persistedSnapshot
  }}
>
  ...
</ConnectMachineContext.Provider>