Где в Xstate хранится сообщение создателя действия?

Question

Выдержка из документации по назначению:

import { Machine, assign } from 'xstate';
// example: property assigner

// ...
  actions: assign({
    // increment the current count by the event value
    count: (context, event) => context.count + event.value,

    // assign static value to the message (no function needed)
    message: 'Count changed'
  }),
// ...

Где хранится "Счетчик изменен"? В контексте?

Answer 1

Да исправить!

Вот демонстрация в codeandbox, чтобы продемонстрировать это, и его разбивка:

Я создал машину вокруг действия assign, которая лучше демонстрирует, что произойдет:

const testMachine = Machine(
  {
    id: "testMachine",
    initial: "lightOn",
    context: {
      count: 0,
      message: ""
    },
    states: {
      lightOn: {
        on: {
          SWITCH_OFF: {
            target: "lightOff",
            actions: assign({
              // increment the current count by the event value
              count: (context, event) => context.count + event.value,
              // assign static value to the message (no function needed)
              message: "Count changed"
            })
          }
        }
      },
      lightOff: {
        on: {
          SWITCH_ON: "lightOn"
        }
      }
    }
  }
);

Использование машины в реакции будет выглядеть так:

import * as React from "react";
import { useMachine } from "@xstate/react";
import { testMachine } from "./machines";

export default function Test() {
  const [current, send] = useMachine(testMachine);
  return <>
    <div>Message:{current.context.message}</div>
    <div>Count:{current.context.count}</div>
    <button onClick={() => send('SWITCH_OFF', { value: 1 })}>Transition</button>
  </>
}

Первоначальный визуализированный компонент будет:

И при нажатии кнопки "Переход" событие SWITCH_OFF будет отправлен на машину, что приведет к срабатыванию действия, увеличению счетчика в контексте и назначенному сообщению.

В результате компонент отображает следующее: