Debounce Machine: Function in Context

[bemayr]

This relates to my comment: #6 (comment)

I just wanted to open an issue in @xstate/inspect for not correctly showing the assigned function in the context when I realized that maybe something is not used correctly. Taking a look at the xstate docs I remembered the following line:

Ideally, the context should be representable as a plain JavaScript object; i.e., it should be serializable as JSON.

If we take a look at JSON.stringify(...) @ MDN it is clearly stated that:

undefined, Functions, and Symbols are not valid JSON values. If any such values are encountered during conversion they are either omitted (when found in an object) or changed to null (when found in an array).

Maybe this is the reason the XState Inspector does not show functions in the context object? Can @davidkpiano or @Andarist confirm that and maybe even suggest the correct way to do that? Otherwise I would open an issue over at davidkpiano/xstate for discussing this.

Reproduction

The following entry actions:

entry: [
  assign({ count: (ctx) => ctx.count + 1 }),
  assign({ dummy: "test" }),
  assign({ action: () => console.log("logging") })
],

lead to:

Reproducible examples are listed here:

• https://codesandbox.io/s/jolly-cdn-5y6he?file=/src/index.js
• https://xstate-catalogue.com/machines/debounce

[Andarist]

Maybe this is the reason the XState Inspector does not show functions in the context object?

Yea, this sounds like the most probable cause of the problem. Functions should not be sent as part of the events payload to avoid this kind of problems.

[bemayr]

Thanks a lot for your fast answer Mateusz! 🙏

[bemayr]

Regarding Mateusz answer there is probably a more idiomatic way to model this Statechart, or is there already an accepted generic Debounce Statechart?

Two ideas that quickly came to my mind:

1. creating the statechart via a factory (the visualizer won't work properly)
2. specifying the action outside of the statechart (needs more documentation and leads to different usage)

And both solutions behave differently, because the action can't be specified dynamically! We might have to think about another solution or accept this as it is...

---

For reference: a quick online search led me to @CodingDive's post: https://dev.to/codingdive/the-most-elegant-debounce-code-you-ll-ever-write-featuring-xstate-3hn0