Reference parent state to exit child state

[tiborsaas]

Hello guys, I'm new to xstate and probably missing something basic. After lots of doc reading and experimenting, I can't find a way to exit a child state.

The goal is to enter a child state, run an async task there and then when it's completed, automatically jump to a parent state.

The error I get currently is:

 Error: Invalid transition definition for state node 'speech.speaking': Child state node '#name_input' does not exist on machine 'speech'

I have the following setup:

const speakMachine = Machine(
  {
    id: "speech",
    initial: "idle",

    states: {
      idle: {
        on: {
          SPEAK: "speaking",
        },
      },
      speaking: {
        activities: ["say"],
        on: {
          CLOSE: {
            target: "#name_input",
            internal: false
          }
        }
      },
    },
  },
  {
    activities: {
      say: context => {
        setTimeout(() => {
          console.log("SPEAK END");
          send('CLOSE');
        }, 1000);
      }
    }
  }
);

const gameMachine = Machine(
  {
    id: "intro",
    initial: "name_input",
    context: {
      age: null,
      name: "",
      gender: "",
    },
    states: {
      speech: speakMachine,
      name_input: {
        id: 'name_input',
        on: {
          ANSWERED: {
            target: "age_input",
            actions: assign({
              name: (context, event) => event.value,
            }),
          },
        },
        meta: {
          say: "This is a nice name",
        },
      },
      age_input: {
        on: {
          ANSWERED: {
            target: "gender_input",
            actions: assign({
              age: (context, event) => event.value,
            }),
          },
        },
      },
      gender_input: {
        on: {
          ANSWERED: {
            target: "speech",
            actions: assign({
              gender: (context, event) => event.value,
            }),
          },
        },
      },
      done: {
        type: "final",
      },
    },
  }
);

[davidkpiano]

You're trying to jump from a state in one machine to a state in a completely different machine. That doesn't make sense. Neither of those machines can know the states of each other.

What you have to do instead is send an event to the parent machine, via sendParent(...). The parent machine can then have a transition for that event to go to a specified state.

[tiborsaas]

Thanks for your reply. This multi machine composition was confusing, but I get it why is this a problem. I thought combining them might provide some mechanism for it.

I've tried the sendParent function, but I couldn't figure out a way to set up the transition properly.

    // gameMachine
    states: {
      speech: {
        ...speakMachine,
        on: {
          EXIT: {
            target: "name_input",
          },
        },
      },
      name_input: {}

calling this in the speakMachine has no effect on the parent one.

sendParent('EXIT');

Or it might be that React doesn't know about the change since sendParent is from xstate and not using the hooks.

[davidkpiano]

Might be better to create a CodeSandbox (XState template) reproduction of this.

[tiborsaas]

Thanks, I was able to resolve it by calling send from useMachine hook in speakMachine but that's very ugly hack :) I just needed to confirm this. I can now find a better architecture to manage machines.

This is the version that doesn't work, I leave it unchanged:

https://codesandbox.io/s/xstate-multi-machines-bb70v

[davidkpiano]

Look how it's restructured here using invoke etc.: https://codesandbox.io/s/xstate-multi-machines-forked-8momw

[tiborsaas]

I really like it, should have experimented with Services too, but Activities just seemed like the best fit at the time.

If I click through your refactor, I get this error:

Unable to send event to child '#_parent' from service 'speech'.