Decouple UI from Actor Hooks

[tnortman-jabra]

Stack

React Native
React Navigation
XState v5

Scenario

• You have a series of screens ScreenA, ScreenB, ScreenC, ...ScreenN and so on

• All screens are under an ActorContext (they are using useActorRef() and useSelector)

• The flow of screens is driven by an XState machine, FlowMachine

• Screens have buttons which send events to the FlowMachine.

• The FlowMachine reacts to these user driven events and moves the user through the flow

Now. Imagine we have a new flow; we create AnotherFlowMachine . We want to reuse some of the same screens ScreenA, ScreenB, and so on

Issue

The ScreenX are using a hook useActorRef which is tied to the FlowMachine. It's very nice for type safety.

How might you go about:

1. letting each screen be reused
2. not couple each screen to the hook which is tightly coupled to the state machine
3. retain type safety

[tnortman-jabra]

Example

const {
  Provider,
  useActorRef: useFlowMachineRef,
  useSelector: useFlowMachineSelector,
} = createActorContext(FlowMachine);

....

export const ScreenA = () => {
  const { send } = useFlowMachineRef();
  return (
    <View>
      <Button onPress={() => send({type: 'user.continue'})}>
        Next
      </Button>
    </View>
  );
}

[tnortman-jabra]

Now, we have AnotherFlowMachine which also responds to a user.continue event type

const {
  Provider,
  useActorRef: useAnotherFlowMachineRef,
  useSelector: useAnotherFlowMachineSelector,
} = createActorContext(AnotherFlowMachine);

and how we might genericize the screen component:

...

type ScreenAProps = {
  /** 
    * how can we narrow this type so that we say the actor pass here must handle a `user.continue` event
  */
  actor: AnyActorRef;
}

const ScreenA = ({ actor }: ScreenAProps) => {
  return (
    <View>
      <Button onPress={() => send({type: 'user.continue'})}>
        Next
      </Button>
    </View>
  );
}

export const ScreenAForFlowMachine => {
  const actor = useFlowMachineRef();
  return <ScreenA actor={actor} />
}

export const ScreenAForAnotherFlowMachine => {
  const actor = useAnotherFlowMachineRef();
  return <ScreenA actor={actor} />
}

But it feels like there is a better way I am not seeing