javascript - xstate を使用して、すべての状態に適用可能で、すべての状態とサブ状態で同じ方法で処理されるイベントを構成することは可能ですか?

Question

私は xstate を初めて使用します。親状態やサブ状態に基づいて、ユーザーがアプリケーションでさまざまなことを要求できるアプリケーションで使用しようとしています。ただし、アプリの状態/サブ状態に関係なく、ユーザーが作成できる必要がある要求がいくつかあります。それらのイベントへの応答は、前の状態が何であったとしても同じです。すべての状態/サブ状態で繰り返し定義する必要がないように、このイベントを構成するにはどうすればよいですか?

Answer 1

はい - 遷移を選択するためのアルゴリズムは、リーフ ノードからルート ノードまで検索するという点で、DOM イベント伝播に似ています。

任意の状態で自然に処理されるルート ノード (最上位) で遷移を定義できます。

import { createMachine } from 'xstate';

const machine = createMachine({
  // ...

  // top-level transitions
  on: {
    ESC: {/* ... */}
  },
  states: {
    // ...
    someState: {
      on: {
        ESC: {/* override top-level transition */}
      }
    }
  }
});