xstate is Javascript library for creating finite state machines and statecharts.
xstate is library for creating finite state machines and statecharts in JavaScript. Code and links to documentation found at https://github.com/davidkpiano/xstate
Questions tagged [xstate]
146 questions
3
votes
2 answers
Set context and fire a method in an xState Action
I have a simple state machine that handles an input form
export const chatMachine = Machine({
id: 'chat',
initial: 'idle',
states: {
idle: {
on: {
SET_MESSAGE: { actions: ['handleMessageChange'] },
COMMENT_SUBMITTED:…
Josh Pittman
- 7,024
- 7
- 38
- 66
2
votes
1 answer
Is there a way to set the state of an xstate machine in a react component in useEffect?
I have the following React.js component that needs the following:
Persist the state when a button is clicked through using fetch to call a server side API.
When the component is initialized that the state is set in the component after calling…
Loren Cahlander
- 1,257
- 1
- 10
- 24
2
votes
1 answer
XState doesn't stay in idle state
I am using xstate together with vuex in my application:
vuex handles the user, api calls, response items, etc.
xstate handles mainly complex form interactions.
Due to the reason, that complex forms contain multiple components, which communicate…
sunwarr10r
- 4,420
- 8
- 54
- 109
2
votes
1 answer
Is there a way to initialize an Xstate state machine using a promise returned from Firebase?
I am trying to persist state using Firebase. I am currently using a 'saveState' function which works fine and properly saves the most recent state to Firebase.
Now I'd like to be able to initialize the state machine based on the most recent saved…
uponly
- 43
- 1
- 7
2
votes
1 answer
Have an xstate machine receive an event and update context(but not change state) regardless of which state it's in
Basically, I have a bunch of different states. I want the machine to be able to receive and update context externally via an event(regardless of which state it's in). I found this link saying how events can be root level...
Using xstate, is it…
Jared Smith
- 283
- 4
- 11
2
votes
0 answers
a way to link xstate visualizer to react app
I have a react app that uses xstate and there are lots of variables and services and everytime I would like to display it to the visualizer, I have to remove those variables. Is there a way to link xstate visualizer to my app? like when my app runs…
Jay-R Joseph Gabunada
- 456
- 4
- 14
2
votes
1 answer
Typescript is not assignable error when accessing xState types
Hi al I'm having a small typing problem with a component I'm trying to fix:
interface ChildrenProps {
exit: (force?: boolean) => void;
state: StateValue;
}
interface Props {
// https://reactjs.org/docs/render-props.html
children:…
Carrein
- 3,231
- 7
- 36
- 77
2
votes
2 answers
Nested property assign in xstate?
I know that you can use the assign action creator like this:
const setFoo = assign({
foo: (context, event) => "someValueBasedOnContextAndEvent",
});
But can you use it like this?
const setFoo = assign({
foo: {
bar: (context, event) =>…
Paul Razvan Berg
- 16,949
- 9
- 76
- 114
2
votes
1 answer
Can I share a component instance across multiple trees in React?
I've been creating an API to help manage state machines in React.
It consists of three components:
: Receives an xstate machine as a prop, and sets up a context for deeper components to use.
: Receives two props: state &…
sookie
- 2,437
- 3
- 29
- 48
2
votes
1 answer
Global Transition to a "catch-all-do-cleanup-exit-nicely" state
I have a catch all error state that does some cleanup for my application and exits nicely.
currently I have to create a specific event {type: "unexpected_error"} and add a transition to every single state of my machine to achieve that.
Is there a…
xvaldetaro
- 189
- 7
2
votes
1 answer
Xstate: different actions and guards leading to same state
I'm writing a state chart with the xstate library.
The statechart represents a medium complex UI.
I've several parallel states, but for this questions let's take into account only two:
SelectionStatus, which represents the select item(s),…
AnimaLupi
- 23
- 5
1
vote
0 answers
Unable to update parent XState machine context from child component
I'm building a website builder application using React and XState. I have a parent component (SkinsController) that uses a state machine (bookmarkMachine) to manage the state of bookmarks. I also have a child component (Editor) that has its own…
SUMAN
- 11
- 2
1
vote
1 answer
xstate.js: Not able to catch error in guard of subService
Is it possible to catch an exception in a guard?
For example:
const { interpret, createMachine } = require("xstate");
const fetchMachine = createMachine(
{
initial: "start",
states: {
start: {
on: {
LETS_TRY:…
Alexander Chirkov
- 11
- 1
1
vote
3 answers
`import()` type annotations are forbidden
I am using XState on the backend and per the XState docs, I added type annotation to my state machine's config:
export const machine = createMachine(
{
tsTypes: {} as import("./testMachine.server.typegen").Typegen0,
...,
…
T. Duke
- 646
- 1
- 6
- 17
1
vote
0 answers
State Machine with XState on AWS Lambda
I would like to implement a complex state machine on some serverless infrastructure like AWS Lambda. I know there is already AWS StepFunction for such purpose but pricing model is not that good for my use case as there will be many state transitions…
Dmytro Kosiachenko
- 21
- 5