is there a better way to nest machines in react?

[alita-moore]

I am trying to use a machine as an actor in another machine in react. I am accomplishing this by passing back the .logic from the actorRef. But this feels weird, is there a better way to do this?

Specifically, here's my code:

export const useWaitForAuthorizationActor = () => {
  const actors: MachineActors<typeof machine> = {
    authorizationIsLoaded: useAuthorizationIsLoadedActor(),
  };

  const actor = useActor(
    machine.provide({
      actors,
    })
  );
  return actor[2].logic;
};

the logic is then provided to another machine in the .provide( method.

I haven't done a lot of investigation but I feel like this is hacky, am I doing something I shouldn't be?

[alita-moore]

Also I recall someone mentioning at one point that you shouldn't nest machines, why not? I've found that nested machines can achieve very powerful use-cases. In fact, trying to reduce the depth of the machine hierarchy makes my app less flexible and more confusing. But maybe I'm naive?

[with-heart]

Could you provide the code for useAuthorizationIsLoadedActor and the definitions of both machines? It's hard to tell what the benefits/pitfalls of this specific approach could be without understanding what the actors do and how they interact.

[alita-moore]

Here they are:

import { supabaseQueries } from "@/modules/supabase";
import { useMemo } from "react";
import { fromPromise } from "xstate";
import { Actors } from "../domain";

export const useAuthorizationIsLoadedActor =
  (): Actors["authorizationIsLoaded"] => {
    const authorizationHeaders = supabaseQueries.useSupabaseAuthHeaders();

    return useMemo(() => {
      return fromPromise(async () => {
        if (authorizationHeaders.data) {
          return { isLoaded: true };
        }
        return { isLoaded: false };
      });
    }, [authorizationHeaders]);
  };

import { MachineActors } from "@wovenlibs/xstate-toolkit";
import { assign, setup } from "xstate";
import { Actors, Context } from "./domain";
import { useAuthorizationIsLoadedActor } from "./actors";
import { useActor } from "@xstate/react";

export const machine = setup({
  types: {
    context: {} as Context,
  },
  actors: {} as Actors,
  delays: {
    BACKOFF_DELAY: ({ context }) =>
      Math.min(2 ** context.attempts * 1000, 60000),
  },
}).createMachine({
  context: {
    attempts: 0,
  },
  id: "Wait For Authorization",
  initial: "Idle",
  states: {
    Idle: {
      always: {
        target: "Checking if Authorization is Loaded",
      },
    },
    "Backoff Retry": {
      entry: assign({
        attempts: ({ context }) => context.attempts + 1,
      }),
      after: {
        BACKOFF_DELAY: "Checking if Authorization is Loaded",
      },
    },
    "Checking if Authorization is Loaded": {
      invoke: {
        src: "authorizationIsLoaded",
        onDone: [
          {
            target: "Done",
            guard: ({ event }) => event.output.isLoaded,
          },
          {
            target: "Backoff Retry",
          },
        ],
        onError: {
          target: "Error",
        },
      },
    },
    Done: {
      type: "final",
    },
    Error: {
      type: "final",
    },
  },
});

export const useWaitForAuthorizationActor = () => {
  const actors: MachineActors<typeof machine> = {
    authorizationIsLoaded: useAuthorizationIsLoadedActor(),
  };

  const actor = useActor(
    machine.provide({
      actors,
    })
  );
  return actor[2].logic;
};

import { PromiseActorLogic } from "xstate";

export type Context = {
  attempts: number;
}

export type Actors = {
  authorizationIsLoaded: PromiseActorLogic<
  {
    isLoaded: boolean;
  },
  void
>;
};

then where the machine is being used:

import { ensureDefined, MachineActors } from "@wovenlibs/xstate-toolkit";
import { assign, setup } from "xstate";
import { Actors, Context } from "./domain";
import { useExtractFileIDsActor, useGenerateFileURLsActor } from "./actors";
import { useFetchTaskActor, useWaitForAuthorizationActor } from "@/app/actors";

const initialContext = ({
  input: { taskID },
}: {
  input: { taskID: string };
}): Context => ({
  taskID,
  task: null,
  inputFileIDs: null,
  inputFileURLs: null,
});

export const machine = setup({
  types: {
    context: {} as Context,
    events: {} as {
      type: "reset";
    },
    input: {} as { taskID: string },
  },
  actors: {} as Actors,
}).createMachine({
  context: initialContext,
  id: "File Preview",
  initial: "Idle",
  states: {
    Idle: {
      always: {
        target: "Waiting for Authorization",
      },
    },
    "Waiting for Authorization": {
      invoke: {
        src: "waitForAuthorizationActor",
        onDone: {
          target: "Fetching Task",
        },
        onError: {
          target: "Error",
        },
      },
    },
    "Fetching Task": {
      invoke: {
        src: "fetchTaskActor",
        input: ({ context }) => ({
          taskID: context.taskID,
        }),
        onDone: {
          target: "Extracting File IDs",
          actions: assign({
            task: ({ event }) => event.output.task,
          }),
        },
        onError: {
          target: "Error",
        },
      },
    },
    "Extracting File IDs": {
      invoke: {
        src: "extractFileIDsActor",
        onDone: {
          target: "Generating File URLs",
          actions: assign({
            inputFileIDs: ({ event }) => event.output.inputFileIDs,
          }),
        },
        input: ({ context }) => ({
          task: ensureDefined(context.task),
        }),
        onError: {
          target: "Error",
        },
      },
    },
    Error: {
      on: {
        reset: "Idle",
      },
    },
    "Generating File URLs": {
      invoke: {
        src: "generateFileURLsActor",
        onDone: {
          target: "Displaying Input Files",
          actions: assign({
            inputFileURLs: ({ event }) => event.output.inputFileURLs,
          }),
        },
        input: ({ context }) => ({
          inputFileIDs: ensureDefined(context.inputFileIDs),
        }),
        onError: {
          target: "Error",
        },
      },
    },
    "Displaying Input Files": {},
  },
});

export const useInjectedFilePreviewActor = () => {
  const actors: MachineActors<typeof machine> = {
    fetchTaskActor: useFetchTaskActor(),
    extractFileIDsActor: useExtractFileIDsActor(),
    generateFileURLsActor: useGenerateFileURLsActor(),
    waitForAuthorizationActor: useWaitForAuthorizationActor(),
  };

  return machine.provide({
    actors,
  });
};

[with-heart]

Regardless, "you shouldn't nest machines" is bad advice imo. I love modeling complex logic as systems of actors and xstate is well suited for it (to a point). Being able to nest actors within each other and vary the types of logic most appropriate for the situation (machines for complex, state-based behaviors, promises for async operations, etc.) leads to powerful, flexible systems.

Without knowing what your machines/hooks are intended to accomplish, one thing that might be helpful when thinking about nesting actors comes from the Actors page in the docs:

When you create an actor from actor logic via createActor(actorLogic), you implicitly create an actor system where the created actor is the root actor. Any actors spawned from this root actor and its descendants are part of that actor system.

Thinking about machine actors created by useActor as representing a system of actors guides how I structure and nest actors within that system. The root machine acts as the coordination layer for the system, invoking and spawning the various actors that handle the primary responsibilities of the system.

The actors can communicate with each other: actor-to-root with sendParent and actor-to-actor using send (to the other actor's systemId).

Nested actors can be accessed from outside the system by directly accessing the actor on the root state: state.context.spawnedActor for a spawned actor stored in context or state.children['actor-id'] for a spawned/invoked actor with an id.

These two things allow for a lot of flexibility in how you separate and nest your logic.

Again I'm not sure if this applies to your specific situation or not but I hope this helps your thinking!

[with-heart]

Oh dang, you replied while I was writing that last reply hahahaha. I'll read through the code soon and see if it gives me any other thoughts

[alita-moore]

hey @with-heart have you had a chance to take a look at this?