终态

终态是表示机器完成或成功终止的状态。它由状态节点上的 type: 'final' 属性定义：

import { createMachine, createActor } from 'xstate';

const feedbackMachine = createMachine({
  initial: 'prompt',
  states: {
    prompt: {
      /* ... */
    },
    thanks: {
      /* ... */
    },
    closed: {
      type: 'final',
    },
    // ...
  },
  on: {
    'feedback.close': {
      target: '.closed',
    },
  },
});

当机器达到终态时，它将不再接收任何事件，且其内部运行的任何内容都会被取消和清理。带有边框的方框图标表示终态。

一个机器可以有多个终态或没有终态。

• 状态机可以有零个或多个终态。有些机器可能会无限期运行，不需要终止。
• 终态可以有 output 数据，当机器终止时，这些数据会发送到父机器。
• 当机器达到顶级终态时，它会终止。
• 终态不能有转换。

顶级终态

顶级终态是机器的直接子状态。当机器达到顶级终态时，机器将终止。当机器终止时，它将不再接收事件或转换。

子终态

当父（复合）状态的子终态被达到时，该父状态被认为是“完成”的。该父状态的 onDone 转换将自动执行。

import { createMachine } from 'xstate';

const coffeeMachine = createMachine({
  initial: 'preparation',
  states: {
    preparation: {
      initial: 'weighing',
      states: {
        weighing: {
          on: {
            weighed: {
              target: 'grinding'
            }
          }
        },
        grinding: {
          on: {
            ground: 'ready'
          }
        },
        ready: {
          // 父状态 'preparation' 的子终态
          type: 'final'
        }
            },
            // 当子终态达到时将执行转换
      onDone: {
        target: 'brewing'
      }
    },
    brewing: {
      // ...
    }
  }
});

并行状态中的终态

当并行状态的所有区域都“完成”时，并行状态被认为是“完成”的。并行状态的 onDone 转换将被执行。

在这个例子中，preparation 状态是一个具有两个区域的并行状态：beans 和 water。当两个区域都完成时，preparation 状态完成，并进入 brewing 状态。

import { createMachine, createActor } from 'xstate';

const coffeeMachine = createMachine({
  initial: 'preparation',
  states: {
    preparation: {
      type: 'parallel',
      states: {
        beans: {
          initial: 'grinding',
          states: {
            grinding: {
              on: {
                grindingComplete: 'ground',
              },
            },
            ground: {
              type: 'final',
            },
          },
        },
        water: {
          initial: 'heating',
          states: {
            heating: {
              always: {
                guard: 'waterBoiling',
                target: 'heated',
              },
            },
            heated: {
              type: 'final',
            },
          },
        },
      },
      onDone: 'brewing',
    },
    brewing: {},
  },
});

输出

当机器达到其顶级终态时，它可以生成输出数据。您可以在机器配置的 .output 属性中指定这些输出数据：

import { createMachine, createActor } from 'xstate';

const currencyMachine = createMachine({
  // ...
  states: {
    converting: {
      // ...
    },
    converted: {
      type: 'final',
    },
  },
  output: ({ context }) => ({
    amount: context.amount,
    currency: context.currency,
  }),
});

const currencyActor = createActor(currencyMachine, {
  input: {
    amount: 10,
    fromCurrency: 'USD',
    toCurrency: 'EUR',
  },
});

currencyActor.subscribe({
  complete() {
    console.log(currencyActor.getSnapshot().output);
    // logs e.g. { amount: 12, currency: 'EUR' }
  },
});

.output 属性也可以是一个静态值：

import { createMachine, createActor } from 'xstate';

const processMachine = createMachine({
  // ...
  output: {
    message: 'Process completed.',
  },
});

终态速查表

import { createMachine } from 'xstate';

const feedbackMachine = createMachine({
  initial: 'prompt',
  states: {
    prompt: {
      /* ... */
    },
    thanks: {
      /* ... */
    },
    closed: {
      type: 'final',
    },
    // ...
  },
  on: {
    'feedback.close': {
      target: '.closed',
    },
  },
});

速查表：并行状态中的终态

import { createMachine} from 'xstate';

const coffeeMachine = createMachine({
  initial: 'preparation',
  states: {
    preparation: {
      type: 'parallel',
      states: {
        beans: {
          initial: 'grinding',
          states: {
            grinding: {
              on: {
                grindingComplete: 'ground',
              },
            },
            ground: {
              type: 'final',
            },
          },
        },
        water: {
          initial: 'heating',
          states: {
            heating: {
              always: {
                guard: 'waterBoiling',
                target: 'heated',
              },
            },
            heated: {
              type: 'final',
            },
          },
        },
      },
      onDone: 'brewing',
    },
    brewing: {},
  },
});