top-level "always" without conditions (onEvent)

[serhiipalash]

Is there a way to attach some action to all possible events in one place instead of doing it for each event separately?

When I try to do this

{
{
  "id": "my-state-machine",
  "initial": "loading",
  "always": {
    "actions": ["addBreadcrumb"]
  },
  "states": {
    "loading": {
      "on": {
        "DATA__FETCH": [
          {
            "cond": "hasData",
            "target": "editing",
            "actions": ["updateContext"]
          },
          {
            "target": "empty"
          }
        ]
      }
    },

    "empty": {},

    "editing": {
      "on": {
        "NAME__CHANGE": {
          "actions": ["updateName"]
        },
        "AGE__CHANGE": {
          "actions": ["updateAge"]
        }
      }
    }
  }
}

It gives me an error Maximum call stack size exceeded. The next one gives the same error as well

"always": [
  {
    "cond": "alwaysTrue",
    "actions": ["addBreadcrumb"]
  }
}

I know that there is an onEvent listener in service itself, but is it possible to define similar functionality inside machine?

[serhiipalash]

I've played around with it a little bit more and now I see that always actually goes after the transition is done or on enter the state and it has no even. The guard event looks like this

{"type": ""}

So, always goes after state change and has only current state and context as params.

In our case we need a side affect on event, but just before all its actions. We need a breadcrumb of what user intents to do before actually executing it. This is for our error handling system, it consist of user intents and exceptions. We would like to track event names from various state machines as intents.

The onEvent listener under the service also doesn't fit. onEvent always goes after event actions execution. At least, it is like this in my testing.

So, the only way to do this today is to manually add one more action trackBreadcrumb for all events in the code, event without actions at the moment. This is tedious and not scalable, imho.

Maybe it's better to move onEvent execution before event actions execution? It seems more logical.

[serhiipalash]

Maybe it's better to move onEvent execution before event actions execution?

This will solve the case under the interpreter level. Solving it under the machine level would be also good to have 😄 . I don't know how to name this node in statechart, maybe something like on.any or just any.

[davidkpiano]

Yes there is, but you have to change the way you think about modeling the logic here. You essentially want two things to happen at the same time:

• An action to be executed on every transition
• Normal transitions between states to happen

These seem like orthogonal concerns. So what should you use? Orthogonal (a.k.a. parallel) state nodes!

{
  type: 'parallel',
  states: {
    whatever: {
      on: { '*': { actions: 'doSomething' } }
    },
    editor: {
      initial: 'loading',
      states: {
        loading: {/* ... */},
        // ...
      }
    }
  }
}

[serhiipalash]

Thank you @davidkpiano ! It works!