并行状态节点 Parallel State Node

在状态图中，你可以将状态声明为 并行状态。 这意味着它的所有子状态将同时运行。 要了解更多信息，请参阅 中的部分。

API

通过设置 type: 'parallel' 在状态机和/或任何嵌套复合状态上指定并行状态节点。

例如，下面的状态机允许 upload 和 download 复合状态同时处于活动状态。 想象一下，这代表一个可以同时下载和上传文件的应用程序：

```js {3,5,21} const fileMachine = createMachine({ id: ‘file’, type: ‘parallel’, states: { upload: { initial: ‘idle’, states: { idle: { on: { INIT_UPLOAD: { target: ‘pending’ } } }, pending: { on: { UPLOAD_COMPLETE: { target: ‘success’ } } }, success: {} } }, download: { initial: ‘idle’, states: { idle: { on: { INIT_DOWNLOAD: { target: ‘pending’ } } }, pending: { on: { DOWNLOAD_COMPLETE: { target: ‘success’ } } }, success: {} } } } });

console.log(fileMachine.initialState.value); // => { // upload: ‘idle’, // download: ‘idle’ // }

  2. <iframe src="https://stately.ai/viz/embed/?gist=ef808b0400ececa786ec17e20d62c1e0"></iframe>
  4. 并行状态节点的状态值表示为一个对象。 此对象状态值可用于进一步转换到并行状态节点中的不同状态：
  6. ```js
  7. console.log(
  8.   fileMachine.transition(
  9.     {
  10.       upload: 'pending',
  11.       download: 'idle'
  12.     },
  13.     { type: 'UPLOAD_COMPLETE' }
  14.   ).value
  15. );
  16. // => {
  17. //   upload: 'success',
  18. //   download: 'idle'
  19. // }

复合状态节点可以包含并行状态节点。 嵌套状态节点的配置相同：

  1. const lightMachine = createMachine({
  2.   // 不是并行状态机
  3.   id: 'light',
  4.   initial: 'green',
  5.   states: {
  6.     green: {
  7.       on: {
  8.         TIMER: { target: 'yellow' }
  9.       }
  10.     },
  11.     yellow: {
  12.       on: {
  13.         TIMER: { target: 'red' }
  14.       }
  15.     },
  17.     // 嵌套并行状态机
  18.     red: {
  19.       type: 'parallel',
  20.       states: {
  21.         walkSign: {
  22.           initial: 'solid',
  23.           states: {
  24.             solid: {
  25.               on: {
  26.                 COUNTDOWN: { target: 'flashing' }
  27.               }
  28.             },
  29.             flashing: {
  30.               on: {
  31.                 STOP_COUNTDOWN: { target: 'solid' }
  32.               }
  33.             }
  34.           }
  35.         },
  36.         pedestrian: {
  37.           initial: 'walk',
  38.           states: {
  39.             walk: {
  40.               on: {
  41.                 COUNTDOWN: { target: 'wait' }
  42.               }
  43.             },
  44.             wait: {
  45.               on: {
  46.                 STOP_COUNTDOWN: { target: 'stop' }
  47.               }
  48.             },
  49.             stop: {
  50.               type: 'final'
  51.             }
  52.           }
  53.         }
  54.       }
  55.     }
  56.   }
  57. });
  59. console.log(lightMachine.transition('yellow', { type: 'TIMER' }).value);
  60. // {
  61. //   red: {
  62. //     walkSign: 'solid',
  63. //     pedestrian: 'walk'
  64. //   }
  65. // }