Pass parameters to onEnter/onExit methods?

Hi there,

First off, awesome library! I’ve just started using it and am playing with retrofitting an existing app. Because of some of the architecture in the existing app, it would be really convenient if I could pass parameters along to the methods registered with onEnter and onExit.

For example, I have a sign in component which makes use of a form component. When the submit handler of the form component is triggered, it passes the parent component an object with keys and values for each field. What I used to do is take those values in the onSubmit handler and just pass them directly to fetch, however now what it seems to make sense to do is have the onSubmit handler simply transition to the submitting state. I then have and onEnter handler for the submitting state which will now be responsible for making the call to fetch.

The issue I’m having is, how to best get the form data from the onSubmit handler to the onEnter handler for the submitting state. I know I can add it as a second argument to this.props.transition() to get that data merged into the components props, however having data that should be ephemeral now hanging around on props feels a little gross. The other thing I can do is attach those values to the component’s this and then reference them again in the onEnter handler, but this has the same issue.

Ideally I would like to be able to just pass any arbitrary amount of arguments to this.props.transition() to then be passed to the handler method. In my case this would look something like:

const stateChart = {
  initial: 'start',
  states: {
    start: {
      on: {
        SUBMIT: 'submitting',
      },
    },
    submitting: {
      on: {
        SUBMITTING_SUCCESS: 'verified',
        SUBMITTING_FAILURE: 'error',
      },
      onEntry: 'enterSubmitting',
    }
    ...
}

export class SignIn extends Component {
  ...
  onSubmit(formDatat) {
    // we would do something like pass null as the second argument if we didn't want any props merged
    this.props.tranistion('SUBMIT', null, formData)
  }

  enterSubmitting(formData) {
    fetch({
      method: 'POST',
      url: 'foo.bar.com',
      body: formData
    })
     ....
  }
}

My first question is, does this seem reasonable or is there some reason not do this. Also, is there a better way to approach this problem with the existing implementation that I’m not thinking of? Thanks!

[fossage]

@MicheleBertoli , Just as an update to this I have since realized my approach was likely flawed from the start. I’ve been reading Ian Horrocks “Constructing the User Interface with Statecharts” to get a better sense of how to work with statecharts, and he recommends not triggering actions from ‘onEnter’ and ‘onExit’ state hooks if at all possible because they become unwieldy and often need to be special cased. Instead he recommends trying to keep all actions tied directly to events, so in my case I should have still been calling fetch from the onSubmit handler.

This is likely already something you know, but I just thought I would bring it up in case the question ever gets raised again. It seems that most any of the places where I was thinking I would need to pass along parameters through this.props.transition were solved by firing actions in the event handlers, and not in the onEnter/onExit handlers.

[MicheleBertoli]

Thank you very much for sharing your solution @fossage.