Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Jacob Paris
Jacob Paris

Posted on • Edited on

     

Modelling parallel states in XState

The number of states in a system can grow rapidly as features are added, and without proper state management it can get unwieldy quickly. Consider a word processor. They offer three distinct ways to format text.

  • Bold
  • Italic
  • Underlined

Each of these buttons can be toggled on or off, independently of any other. Since each button has 2 states, and there are 3 buttons, that gives us 2^3 = 8 permutations of these three variables

Kyle Shevlin created a fun site to help demonstrate how quickly these can get out of hand here atHeard You Like Booleans

A state chart showing every permutation of bold, italic, and underlined states

When the user toggles the bold button, we want that to move from either a non-bold state to a bold state, or the reverse. We can model this with a BOLD action that transitions fromunformatted tobold and vice versa.

The same pattern can be applied to the italic and underlined states, as well as every permutation thereof.

A state chart showing the events and transitions between bold, italic, and underlined permutations of states

To try it out, you can walk through the machine here with the XState Visualizer

https://xstate.js.org/viz/?gist=287ae37cfc1db9c5c098ea3ae4057a60

Modelled this way, the complexity of such a simple set of states is very clear, and this represents one of the shortcomings of both finite state machines and classic boolean state handling. What happens when we want to extend this? A user of our word processor should be able to align text to the left, right, centered, or justified. We'd end up with 32 distinct, finite states.

State Charts are an extension of the finite state machine, allowing us to storeextended state within the diagram.

Looking back at our model, we have 3 independent toggle buttons. While changing one affects the final state we end up in, it does not affect the state of either of the two other buttons. State charts give us the opportunity to model them independently withparallel states.

A state chart with three parallel states for bold, italic, and underlined

Parallel states differ from classic states in that the machine is inevery state at once. The default state is simultaneouslyformat.bold.off,format.italic.off, andformat.underlined.off

The simplicity of this approach is even more apparent once we add the transitions between states

Parallel states for bold, italic, and underline, with events to toggle each

Example:https://xstate.js.org/viz/?gist=b9a8e4db654cea07fe2080bd56b6cdc7

The next part of this series is here atXState Text Formatting Part 2

References

Constructing the user interface with state charts (Addison Wesley, 1999)

XState Documentation

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Sales funnels and B2B SaaS for the mortgage industry, almond latte fanatic, LA @eggheadio , formerly ToolStache
  • Location
    Toronto, ON
  • Work
    Senior Developer at Fintech
  • Joined

More fromJacob Paris

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp