Emit event from actor spawned with spawnChild

[ElijahJohnson5]

Hi I am trying to have emitted events come from a child actor created using spawnChild

The actor looks like this

fromCallback<EventObject, { websocket: WebSocket }>(
      ({ sendBack, input, emit }) => {
        input.websocket.binaryType = "arraybuffer";

        const openHandler = () => {
          emit({ type: "test" });
        };

        input.websocket.addEventListener("open", openHandler);

        return () => {
          input.websocket.removeEventListener("open", openHandler);
        };
      },
    ),
  },

and my main machine looks like this (simplified)

createMachine({
  id: "ws",
  initial: "Initial",
  states: {
    Initial: {
      entry: spawnChild(otherActor)
      },
    },
  }
})

But I can't seem to get the events when adding a event handler on the statemachine after calling createActor on it.

Something like

actor = createActor(machine);
actor.on("test", () => {
  console.log("Received test")
});

Is there a way to do this or should I be doing something different?

[justin0mcateer]

I need to do basically the same thing. I have a fairly complex actor system, three levels of machines. I need to emit events to the software that is instantiating the top-level machine. However, the events that need to be emitted are created in the lowest level machine. Events are emitted from the child actor, but not from the parent. Further, I can't see anyway to 'catch and re-emit' events from within the parent.

There are two options that I can see:

1. Pass a reference to the top level actor all the way down, send events from the grand-child up to the grand-parent and do all emitting there.
2. Simply pass in an external event emitter down to the grand-child and emit directly on that emitter from there.

[justin0mcateer]

So, this solution is a little bit hacky, but it might work for you.

Create partial wildcard event handler in the top-level actor, like so:

  on: {
    'emit.*': {
      actions: [
        // console.log for debugging/illustrative purposes...
        ({ event }) => console.log(`Parent received emit event of type: ${event.type}`),
        emit(({ event }) => ({
          ...event, 
          type: event.type.replace('emit.', ''),
        })),
      ],
    },
  },

Then in the child actor, send an XState event to the top-level parent with sendTo using an actor reference:

sendTo(({ context }) => context.parentRef, { type: 'emit.test-event', details: 'foo!' }),

This abuses the ability to send XState events to between any actors and the partial wildcard event handling to catch those 'special' events, strip off the marker prefix and re-emit all of the properties from the XState event as an emitted ('JavaScript') event.

If you subscribe to events on the parent:

// Subscribe to _events_ on the parent
actor.on('*', (event) => {
  console.log('Parent emitted:', event);
});

You will see the console output:

Parent received emit event of type: emit.test-event
Parent emitted: { type: "test-event", details: "foo!" }