Statecharts

Hi all! I'm new to statecharts and I need some help. Let me know if I should ask newbie questions in another channel (failed to find the help one). I have a modal with three states, "a" "b" and "c". I also have 3 possible options to select on the initial "a" screen, let's call these options 1, 2 and 3. These options define state of the modal on certain events, e.g

The options are events, not states

@davidkpiano

(davidkpiano) Thanks, David! What should I do with options that require multiple modal transitions, like option 2? Is it better to describe it as a separate machine?

@rreckonerr

(rreckonerr) have a look at this link https://statecharts.github.io/ to get your head around the basics and try to figure out a state model for your scenario in terms of just sequential states and events*. The guides at https://xstate.js.org/docs/guides/states.html are also useful (start with States and Events) and check out the guide on Guarded Transitions also. Good luck.

@rreckonerr

(rreckonerr) and note from the guide : An event is what causes a state machine to transition from its current state to its next state. All state transitions in a state machine are due to these events; state cannot change unless some stimulus (the event) causes it to change.

@simongandrews

(simongandrews) Thank you! I have no problems switching the modal machine from one state to another by sending the events. What I'm trying to grasp is how to combine it with the options that can carry a different logic in between modal's idle and final step. I don't want to keep this option specific logic (on which modal states to trigger and how many of them there're) in component, but rather store it on the option itself, so I could alter the flow only by adjusting an option. I'm wondering if an option can be a driver for the modal machine itself. Will dig into this more this week, sorry if my question is too unclear! Will return with more questions if I get stuck :)

Does anybody know why assign actions are not called on entry on the initial state? I have a simple example here of my problem ->

This bug was recently fixed, please use the latest version of

@xstate

/fsm

I saw it, thanks!

Is anyone here using Statecharts to model HDL for FPGAs?

I'm trying to get a good design pattern going for hierarchical state machines in Hardware Description Language, but I'm new to Statecharts. Consequently, I'm trying to learn from two directions... How to implement Statechart concepts in HDL, and how to produce Statecharts which represent behavior in my existing HDL.

So a specific question of the second type... how would we use a state chart to represent a conditional action which is independent of a state transition? At present, my best notion would be to, within a state, say do/ if(condition){value = 0} Or similarly, on a state transition (changeState == true) / if (condition2 == true) {value = 0} It just starts to be a lot of pseudocode crammed into an action statement.

Does anyone know how to access machine context from within interpreter.onDone() method?

I'm struggling with it...

In SCXML, there is <if> for this. In XState, the equivalent is the choose(...) action creator, to give you ideas.

When using TS and you provide a context Interface, why does the machine allow it to be undefined?

Shouldn't it force the machine to be modelled according to the context interface if you provide one?

Are there other channels/servers for xstate? This seems fairly dead and I have some questions regarding TS

what's the difference between spawning an actor and spawning a machine? by the looks of the docs they look identical? actors machine

From my understanding one can describe the behaviour of an actor using a callback, a promise, an observable or a machine. The first docs link you mention simply uses the machine case to describe the general concept.

Hey all ! I recently made my first statechart using xstate, This statechart isn't directly modelled in the UI layer, as it has two distinct UIs to drive simultaneously. I'm now trying to make it easier to understand in the visualizer by regrouping states that share transitions in compound states (clustering, as this page describes it. While statechard.github.io doesn't make the distinction, xstate lets me choose between creating hierarchical state nodes and invoking other machines/actors. Do you have any guidelines about when to prefer one method over the other ? My guts tell me it's a modularisation/boundaries problem. Also having separate machines allows isolation of the context data. But feel free to correct me.

In addition to this, when creating compound states, I find myself adding more states that don't have a representation in the UI; like final child state nodes. How does a normal xstate + react app handle those to make no re-render happens ?

For those passing by, I think I'm finding parts of answers to my questions in this thread about decoupling statecharts and views :

Why does

@xstate

/vue no longer have a context exposed from useMachine?

(in Vue3)

There is now an XState Discord: https://discord.gg/xtWgFTgvNV

And so it begins: