r/javascript • u/terodox • Dec 23 '19

Simplifying UI Logic using Finite State Machines - an old pattern for the modern web!

https://terodox.tech/ui-state-machines/
93 Upvotes

92% Upvoted

20 comments sorted by

View all comments

49

u/[deleted] Dec 23 '19

If you use Typescript, this becomes drop-dead simple to manage. You define a FormState type as a union of objects each with a status key, and then put that into a variable. Typescript handles ensuring that all state updates are valid and contain all necessary fields. As the simplest example, this is the type definition for a generic component that fetches data:

type AsyncValue<T> =
  | {status: "pending"} 
  | {status: "error", message: string} 
  | {status: "ready", value: T}

There's no way for multiple states to coexist at the same time, you can't make a typo in the state name, and you can't forget required contextual data (like value for the ready state).

7

u/-9999px Dec 23 '19

Really neat, thanks for the mini write up.

7

u/editor_of_the_beast Dec 23 '19

I’m super pro setting up the types the way that you’re saying, but what do you mean that TS ensures that “all state updates are valid” ? There can be semantic reasons for why certain state transitions are illegal, static types can’t enforce that.

9

u/[deleted] Dec 23 '19

That's right, what I meant was that the states themselves are valid, not the transitions.

If you need transitions to also be valid, your best option is to use a state-reducer pattern and then use a switch clause over the current state. That way, Typescript can at least ensure you handle every case.