menu

Statecharts

The Statecharts community on Spectrum is (along with spectrum) MOVING TO OTHER PLATFORMS: For statecharts discussions in general go to Statecharts Discussion on GitHub or Gitter(https://gitter.im/statecharts/statecharts). For XState-specific questions, go to the XState discussion forum for Q&A or the Stately discord chat to chat.

Channels
Team

Statecharts watercooler

March 7, 2019 at 5:55am
Show previous messages

August 20, 2020 at 8:59pm
or do I simply not use context at all, and instead use the local state of my component (I'm using react)
  • reply
  • like

October 16, 2020 at 10:51am
I was not able to understand how I can update context data by using external objects. Could some one please provide an example. I'm new to both React and xstate. I was not able to understand how to update the context
  • reply
  • like
Got it. We can update the data from the event...Thanks.
  • reply
  • like

October 27, 2020 at 10:19am
Hello everyone, I want to fetch data then update context every n seconds. But the code below doesn't work, any tips? thanks
activities: {
queryRoundStatus: (context) => {
const timer = setInterval(() => {
logger.log(`queryRoundStatus, inteval: ${HEART_BEAT_INTERVAL}`)
API.queryRoundStatus(context.gameId)
.then(data => assign({ ...data }))
}, HEART_BEAT_INTERVAL);
return () => clearInterval(timer)
},
},
  • reply
  • like
I think you would need to separate getting the data & saving the data to context. You could use a callback, then, when the callback fires, have a seperate action to save the response data to state. Here is an example of a callback that might help - https://bradwoods.io/guides/xstate/invoke-callback
  • reply
  • like
thanks, it works well.
  • reply
  • like
so I can only update context with actions, is that true?
  • reply
  • like
(simon-lu) ... more precisely, I believe I remember reading somewhere in the docs that the only way to update context is using actions.assign. The only other way I can think of is by "extending" an existing machine using withContext. I find that particularly useful when spawning child machines.
Edited
  • reply
  • like
(simon-lu) Try this:
invoke: {
src: () => (sendBack) => {
const interval = setInterval(() => sendBack({ type: 'HEARTBEAT' }), 1000)
return () => clearInterval(interval)
}
},
on: {
HEARTBEAT: { /* ... do whatever ... */}
}
  • reply
  • like
Hey there! Is there no way to get useMachine in vue2?
  • reply
  • like
I mean I can write my own implementation of it, but was just wondering if there isn't an official vue2 package for it
  • reply
  • like

October 28, 2020 at 2:42pm
That's currently in the works. Have you tried the way referenced in the docs?
  • reply
  • like
I'm not sure what way that would be? :)
  • reply
  • like
that's what I'm using, but that doesn't provide an interface to override things like services on a per-case basis?
  • reply
  • like

November 6, 2020 at 4:01pm
Would anyone have a good example of how to connect graphQL subscriptions to a state machine? Currently I'm subscribing in a Vue component and sending the result to the state machine to store in its context, but ideally I would want any data fetching/subscribing to be done in the machine instead, so my component can just be an expression of the context/state
  • reply
  • like

November 9, 2020 at 11:23pm
Using Typescript... if I spawn another machine as an actor and save the ref in context, how should I type it?
I have ServerMachine which spawns instances of SocketMachine and saves them in a sockets array in the context - but what should the type of the array be?
  • reply
  • like

November 10, 2020 at 1:17pm
currently I've used any but it feels icky
  • reply
  • like

November 14, 2020 at 2:01pm
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
  • 1 => closeModal
  • 2 => "b" => "c"
  • 3 => "c" What is the best way to describe behavior with xstate? I tried to create to parallel states for modal and option, but failed to trigger state stransitions from the siblings. Any thougths on this?
  • reply
  • like

November 15, 2020 at 5:53pm
The options are events, not states
  • reply
  • like
(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?
  • reply
  • like
(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.
  • reply
  • like
(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.
  • reply
  • like
(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 :)
  • reply
  • like

November 26, 2020 at 10:56am
Does anybody know why assign actions are not called on entry on the initial state? I have a simple example here of my problem ->
  • reply
  • like
Show more messages