Hi Mikey, really enjoying this series as a thorough introduction to XState. Not having the ability to run some experiments myself right now, I'm curious why you set target: '. warm' rather than just warm. Does it carry a meaning?
Hey Joel, glad you are enjoying the series. 😊
I mostly use target as I like being explicit and it makes adding a guard or action easier. You can totally omit it if you prefer the shorthand notation.
Right, I'm referring in particular to the prefix dot though, didn't see that syntax explained anywhere. Is .warm different to warm in any meaningful way?
Ah right. The dot is added (and needed) for the transition to be recognized as an internal transition. We don't want the machine to leave the active state. Instead, we are specifying a relative target (e.g .warm) to transition to the active.cold or active.warm state.
Without the relative target, the machine could think that we are transitioning to a warm state by assuming a state structure like the following and would then fail since the state node does not exist.
interfaceThermostatStateSchema{states:{active:{};inactive:{};// this one doesn't actually exist since it's a child of active warm:{};}}
I'm glad you asked! I couldn't figure out a good way to include it in the post as I found the transition pages of docs the most difficult to grasp and a bit discouraging for beginners.
On day 15 I was also still naive enough to believe I can get away with explaining one concept per day. 😁 Towards the end, I had to ramp up and explain 2-3 things per post to write about most XState features I wanted to cover.
Hi Mikey, really enjoying this series as a thorough introduction to XState. Not having the ability to run some experiments myself right now, I'm curious why you set
target: '. warm'
rather than justwarm
. Does it carry a meaning?Hey Joel, glad you are enjoying the series. 😊
I mostly use target as I like being explicit and it makes adding a guard or action easier. You can totally omit it if you prefer the shorthand notation.
Right, I'm referring in particular to the prefix dot though, didn't see that syntax explained anywhere. Is
.warm
different towarm
in any meaningful way?Ah right. The dot is added (and needed) for the transition to be recognized as an internal transition. We don't want the machine to leave the
active
state. Instead, we are specifying a relative target (e.g.warm
) to transition to theactive.cold
oractive.warm
state.Without the relative target, the machine could think that we are transitioning to a
warm
state by assuming a state structure like the following and would then fail since the state node does not exist.Makes sense! Wasn't trivial to figure out without XState experience though :)
I'm glad you asked! I couldn't figure out a good way to include it in the post as I found the
transition
pages of docs the most difficult to grasp and a bit discouraging for beginners.On day 15 I was also still naive enough to believe I can get away with explaining one concept per day. 😁 Towards the end, I had to ramp up and explain 2-3 things per post to write about most XState features I wanted to cover.
Either way, really happy to have come across your calendar, will make a good basis for me to dive into XState myself!
Thank you.
It's a high reward decision for sure!
Let me know if you are struggling with anything and feel free to send me machines for feedback.