Is there a way to declare onTrasition logic in statechart?

[serhiipalash]

Hi! We have a service that should invoke side effects to another service on its context value (appearance) is changed, and there are multiple events that can change this value. It's possible to implement such logic using .onTransition(...) callback, but is there a way to program such logic inside statechart?

I've played around in sandbox and added both always and wildcard * to top level, but nothing works.

{
  id: "toggle",
  initial: "inactive",
  context: {
    count: 0
  },
  always: [
    {
      cond: (ctx, event) => event.type === "TOGGLE",
      actions: [() => console.log("Log from always")]
    }
  ],
  on: {
    ["*"]: {
      actions: [() => console.log("Log from wildcard")]
    }
  },
  states: {
    inactive: {
      on: {
        TOGGLE: {
          target: "active",
          actions: [() => console.log("Log from regular event")]
        }
      }
    },
    active: {
      entry: assign({ count: (ctx) => ctx.count + 1 }),
      on: { TOGGLE: "inactive" }
    }
  }
}

https://codesandbox.io/s/nostalgic-darkness-0two7?file=/src/index.js

[davidkpiano]

This might be the same answer to your question: #1712