Идентификация узлов состояния

По-умолчанию идентификатором id узла состояния является его полный путь с разделителями. Вы можете использовать этот идентификатор id по-умолчанию, чтобы указать узел состояния:

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      // default ID: 'light.green'
      on: {
        // You can target state nodes by their default ID.
        // This is the same as TIMER: 'yellow'
        TIMER: { target: '#light.yellow' },
      },
    },
    yellow: {
      on: {
        TIMER: { target: 'red' },
      },
    },
    red: {
      on: {
        TIMER: { target: 'green' },
      },
    },
  },
});

Относительные цели

Узлы дочернего состояния могут быть нацелены относительно их родительских, указав точку (.), За которой следует их ключ:

const optionsMachine = createMachine({
  id: 'options',
  initial: 'first',
  states: {
    first: {},
    second: {},
    third: {},
  },
  on: {
    SELECT_FIRST: { target: '.first' }, // resolves to 'options.first'
    SELECT_SECOND: { target: '.second' }, // 'options.second'
    SELECT_THIRD: { target: '.third' }, // 'options.third'
  },
});

По умолчанию относительные цели — это внутренние переходы, что означает, что родительское состояние не будет выходить и повторно входить. Вы можете сделать относительные цели внешних переходов, указав internal: false:

// ...
on: {
  SELECT_FIRST: {
    target: { target: '.first' },
    internal: false // external transition, will exit/reenter parent state node
  }
}

Пользовательские идентификаторы

Узлы состояния могут быть обозначены с помощью уникальных идентификаторов, а не с помощью относительных идентификаторов. Это может упростить создание сложных диаграмм состояний.

Чтобы указать идентификатор для узла состояния, укажите уникальный строковый идентификатор в качестве его свойства id, например id: 'greenLight'.

Чтобы сослаться на узел состояния по его идентификатору, добавьте к его строковому идентификатору символ '#', например, TIMER: '#greenLight'.

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      // custom identifier
      id: 'greenLight',
      on: {
        // target state node by its ID
        TIMER: { target: '#yellowLight' },
      },
    },
    yellow: {
      id: 'yellowLight',
      on: {
        TIMER: { target: '#redLight' },
      },
    },
    red: {
      id: 'redLight',
      on: {
        // relative targets will still work
        TIMER: { target: 'green' },
      },
    },
  },
});

Примечания:

• Для корневого узла состояния всегда рекомендуются задавать идентификатор.
• Убедитесь, что все идентификаторы уникальны, чтобы предотвратить конфликты имен. Естественно, уникальность обеспечивается автоматически сгенерированными идентификаторами.

Внимание

Не смешивайте пользовательские идентификаторы с относительными идентификаторами. Например, если узел состояния red выше имеет пользовательский идентификатор redLight и дочерний узел состояния walking, например:

// ...
red: {
    id: 'redLight',
    initial: 'walking',
    states: {
        // ID still resolves to 'light.red.walking'
        walking: {/* ... */},
        // ...
    }
}
// ...

Тогда вы не можете настроить таргетинг на состояние 'walking' с помощью '#redLight.walking', потому что его идентификатор преобразован в '#light.red.walking'. Цель, которая начинается с '#', всегда будет относиться к точному совпадению для '#[state node ID]'.

Краткий справочник

Идентификатор по умолчанию, автоматически сгенерированный:

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    // ID: "light.green"
    green: {
      /* ... */
    },
    // ID: "light.yellow"
    yellow: {
      /* ... */
    },
    // ID: "light.red"
    red: {
      /* ... */
    },
  },
});

Пользовательский идентификатор

// ...
states: {
  active: {
    id: 'custom-active', // can be any unique string
    // ...
  }
}

Таргетинг узла состояния по идентификатору

// ...
on: {
  EVENT: { target: '#light.yellow' }, // target default ID
  ANOTHER_EVENT: { target: '#custom-id' } // target custom ID
}