Установить контекст и запустить метод в действии xState

Question

У меня есть простой конечный автомат, который обрабатывает форму ввода

export const chatMachine = Machine({
  id: 'chat',
  initial: 'idle',
  states: {
    idle: {
      on: {
        SET_MESSAGE: { actions: ['handleMessageChange'] },
        COMMENT_SUBMITTED: {
          actions: ['submitComment']
        }
      }
    }
  }
});

Я хотел бы submitComment действие, чтобы запустить функцию и затем сбросить поле в контексте, как это:

submitComment: (ctx, e) => {
            e.payload(ctx.message);
            assign({
              message: ''
            });
          }

Это не работает

Он запускает метод, который я передаю, но не доходит до бита назначения.

Могу ли я совершить две вещи за одно действие или я должен создать два отдельных действия?

Answer 1

Вы должны создать два отдельных действия, потому что это два отдельных действия.

Я не уверен что e.payload(ctx.message) делает, но события должны быть чисто данными - вы не должны помещать функции в события.

Также, assign(...) не обязательно. Это чистая функция, которая возвращает действие, которое выглядит как { type: 'xstate.assign', ...}, Ни одно из действий XState не является обязательным.

Попробуй это:

// ...
COMMENT_SUBMITTED: {
  actions: ['submitComment', 'assignComment']
},

// ...
actions: {
  submitComment: (ctx, e) => { ... },
  assignComment: assign({ message: '' })
}

Answer 2

Сегодня столкнулся с той же проблемой, наконец-то получил что-то вроде этого, и это отлично работает для меня, вы не можете использовать Assign() в действии, но вы можете напрямую изменить контекст

      actions: {
  // ....
  changeToRemove: (context, event, meta) => {
    selection.value.color = 'red'
    context.selectionType = 'remove'
  },
  // ....
}

также попробуйте это сsetTimeout(() => context.selectionType = 'remove', 2000)вместо простого назначения, но, как и ожидалось, когда вы запускаете что-то, что уже использует состояние машины до 2 с, тогда используется старое значение, поэтому, если вы хотите выбрать что-то из API или использовать некоторые асинхронные действия, возможно, лучшим решением будет добавить больше состояний к машине затем после действия вызова отправьте событие на машину, чтобы изменить ее состояние