Установить контекст и запустить метод в действии 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: '' })
}