Can XState replace "conditions"? | Stately | Page 1

dapper nova Mar 20, 2023, 4:06 PM

#

Hello, I am curious if it is possible to replace conditions like if with xstate?
I currently have a lot of nested conditions and they look complicated. I would like to rewrite them into declarative way, just to have everything in one place and to have a visualizer.
I have some input data, a lot of complicated-nested conditions, and finite final UI states.
In fact I do not have state transitions, just initial data -> logic -> ui components to show

Is it possible and it is worth to use xstate for such cases?

jolly ridge Mar 20, 2023, 4:26 PM

#

Maybe/probably, i guess it depends on your problem!

#

your logic will end up mapping to two different concepts in xstate/state machines

#

some of your logic will disappear, because the states of your machine will encode what should happen in what "situation"

#

if this event comes in while we're in this state, do this

#

and then you have "guards"

#

when this event comes in and we're in this state AND this guard returns true (i.e. "request is valid") then do this

#

guards can look at the context of your machine in order to make decisions

dapper nova Mar 20, 2023, 4:46 PM

#

Is it possible to have condition "after" condition, so xstate checks first condition and then go inside and check nested condition and so on, so visually you can see how the logic "flows". Because otherwise I would have just super complex guard and there will be no benefits from plenty of ifs

jolly ridge Mar 20, 2023, 4:54 PM

#

sure, just have a guarded transition, and in the next state it goes to you can have another guarded entry or always transition

#

that will give you the branching that I think you want

#

basically you need to use guards in conjunction with states

#

if you just have loads of guards isn't going to be a mess, they're only meant for simple if, else-if, else logic

#

I think there were plans to add special boolean logic helpers for guards so you could visualise things like if (guard-a and guard-b) or guard-c then transition

#

@spare venture am I imagining this?

#

ohh cool, you can also do this: https://xstate.js.org/docs/guides/guards.html#custom-guards

#

so have a more generic guard and specify some parameter when you reference it

dapper nova Mar 20, 2023, 5:03 PM

#

I do no quite understand how can I have one condition after condition, the visual editor only allows "State" after "Transition"

jolly ridge Mar 20, 2023, 5:30 PM

#

you can have more conditions inside the state, you can right click on the state and "add self transition"

#

and you can make that transition an "always" transition by selecting it and clicking on the "i" icon on the right

#

and setting the trigger to always

shut mortar Mar 20, 2023, 5:30 PM

#

You can do something like this for splitting up the if-statements. In the example, it even does an call to some other service to model "asynchronous" evaluations in an if-statement hell.

jolly ridge Mar 20, 2023, 5:32 PM

#

yeah exactly like that, the states act as nodes to branch out from

shut mortar Mar 20, 2023, 5:33 PM

#

Here's a link to play around with it: https://stately.ai/registry/editor/c26d06d7-cef9-4b7d-8052-5cdbcfdc4607?machineId=f8e657a7-2acb-40d0-9bac-83533a712be5

dapper nova Mar 20, 2023, 6:45 PM

#

Wow, looks like what I needed, thank you very much guys ❤️

#Can XState replace "conditions"?