Much of my study on statecharts suggest that they were (and still are) designed in an environment where we need to manage events with side effects. This is often realized in a state machine’s actions. The service transitions state then actions update the UI.
In some UI frameworks their reactive model is based on derived state. What this means in state machine speak is that the machines transition state and then something else uses that state value to drive the UI. Common example would be placing data-state attributes and using CSS to show/hide. But with xstate use of the current state object this can over complicate things especially when the machine could have nested child states.
What kinds of patterns do others use to drive UI based on derived states? state.toStrings()? assigning a value to context? state.meta? state.hasTag()? Something else?
#Statecharts for the UI using derived values
fervent mist
surreal eagle
I'd use state.matches and state.hasTag, but mostly derive it on the UI-side from context
Well, depending on what you want to do
fervent mist
Ahh so ideally state.matches but in some cases you used state.context.somePropertyControlledByAssignActions?