Set context and fire a method in an xState Action

I have a simple state machine that handles an input form

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

I would like the submitComment action to fire off a function and then reset a field in context like this:

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

This doesn't work.

It fires the method I'm passing in but it doesn't make it to the assign bit.

Can I do two thing sin one action or should I be creating two seperate actions?

You should be creating two separate actions because those are two separate actions.

I'm not sure what e.payload(ctx.message) does, but events should be purely data - you should not put functions in events.

Also, assign(...) is not imperative. It is a pure function that returns an action that looks something like { type: 'xstate.assign', ...}. None of XState's actions are imperative.

Try this:

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

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