Calling parent action from child state machine using XState

Question

VS Code warning: cancelRetry is never used in the machine definition

My machine:

const authMachine = createMachine(
    {
      id: "authenticationMachine",
      tsTypes: {} as import("./consumer.typegen").Typegen0,
      initial: "newPage",
      states: {
        //...
        captcha2: {
          id: "captcha2",
          initial: "notSent",
          states: {
            notSent: {
              on: {
                SEND: "sent",
              },
            },
            sent: {
              invoke: {
                src: "sendCaptchaChallenge",
                onDone: "solving",
              },
            },
            solving: {
              invoke: {
                src: "solveCaptcha",
              },
              on: {
                SOLVED: "solved",
              },
              after: {
                [CAPTCHA_RECHECK]: {
                  target: "solving",
                  internal: true,
                },
                [CAPTCHA_TIMEOUT]: {
                  target: "loginScreen",
                  // call cancelRetry in parent machine
                  actions: "cancelRetry",
                },
              },
            },
            solved: {
              type: "final",
            },
          },
          // after final state, go back to login screen
          onDone: "emailVerification",
          after: {
            [CAPTCHA_TIMEOUT]: "loginScreen",
          },
        },
        emailVerification: {
          invoke: {
            src: "verifyEmail",
            onDone: "authenticated",
            onError: "emailVerification",
          },
        },
  
        authenticated: {
          entry: ["startReceivingMessages"],
          type: "final",
        },
      },
    },
    {
      actions: {
        //
        cancelRetry: (context, event) => {},
      },
      guards: {
        // ...
      },
      services: {
        // ...
      },
    }
  );

How do I call cancelRetry from the child state machine?

Answer 1

You would need to send an event back to the parent either via a sendParent action or via the respond callback of an invoked callback (which is what I've done for illustration purpose; but also invoked callbacks are awesome ;)

import {createMachine, interpret} from 'xstate';

const m =
  createMachine(
    { predictableActionArguments: true
    , initial: 'setup'
    , states: {
        setup: {
          entry: 'echo-echo',
          invoke: {
            src: 'setup-service'
          },
          on: {
            'setup-echo': {
              actions: 'echo-echo'
            }
          }
        }
      }},
    { actions: {
        'echo-echo': (ctx, ev) => console.log(`echo ${ev.what ?? '42'}`)
      }
    , services: {
        // invoked callback!
        'setup-service': () => (respond) => {
          respond({type: 'setup-echo', what: 'Hello World!'})
        }
      }});

interpret(m).start();
//LOG: echo 42
//LOG: echo Hello World!