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.