Pass values when sending events from one machine to another in xState

Question

I have a simple chatMachine that invokes a todoMachine. The todoMachine has an event called 'OPENED_TASK_LIST_CREATOR' which I want to invoke from chatMachine. I've managed to figure this out.

export const chatMachine = Machine({
  id: 'chat',
  initial: 'idle',
  context: { message: '' },
  states: {
    idle: {
      invoke: {
        id: 'todo',
        src: todoMachine
      },
      on: {
        COMMENT_SUBMITTED: {
          actions: 'addComment'
        },
        COMMENT_STARRED: {
          actions: [
            (ctx, e) => console.log('e.payload', e.payload),
            send('OPENED_TASK_LIST_CREATOR', {
              to: 'todo'
            })
          ]
        }
      }
    }
  }
});

The problem I am having is that I want to send a value along with the 'OPENED_TASK_LIST_CREATOR' event. Namely the list id I want opened. I have managed to log it with (ctx, e) => console.log('e.payload', e.payload), just above the send action in COMMENT_STARRED.

Is there a way to passe.payload to send('OPENED_TASK_LIST_CREATOR', { to: 'todo' }) so that I can use the value in todoMachine?

Answer 1

COMMENT_STARRED: {
          actions: [
            (ctx, e) => console.log('e.payload', e.payload),
            send(
              (ctx, e) => ({
                type: 'OPENED_TASK_LIST_CREATOR',
                payload: e.payload
              }),
              {
                to: 'todo'
              }
            )
          ]
        }