Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Introduction to State Machines Using XState

via egghead.io

Overview

The difficulty of managing state is one of the primary reasons our applications become so complex. We try and manage this complexity with a lot of booleans, somewhat semantic variables like isLoading, wasFetched, and hasError, and over-engineered systems that are still full of bugs. Surely, there's a better way.
That better way is state machines.
State machines formalize how we define and transition through the states of our application and give us ultimate control of the most complex parts of our apps.
In this course, we will explore the problems state machines purport to solve, like boolean explosion. We'll try to solve it our own way first, get so far, and then demonstrate how state machines get us all the way. After that, we'll dive into the XState library, JavaScript's premiere state machine library, to learn its API and how to use it to solve our problems.
By the time you're done taking this course, you should have a solid education about state machines and be able to start applying them.

Syllabus

  • Course Intro and Overview
  • Eliminate Boolean Explosion by Enumerating States
  • Replace Enumerated States with a State Machine
  • Use an Interpreter to Instantiate a Machine
  • Use XState Viz to Visually Develop and Test Your Machine
  • Add Actions to Transitions to Fire Side Effects
  • Trigger Actions When Entering and Exiting a XState State
  • Replace Inline Functions with String Shorthands
  • Use Internal Transitions in XState to Avoid State Exit and Re-Entry
  • Send Events to the Machine with the XState Send Action Creator
  • Track Infinite States with with XState Context
  • How Action Order Affects Assigns to Context in a XState Machine
  • Use Activities in XState to Run Ongoing Side Effects
  • Conditionally Transition to States with Guards in XState
  • Simplify State Explosion in XState through Hierarchical States
  • Multiple Simultaneous States with Parallel States
  • Recall Previous States with XState History States Nodes
  • Use XState Null Events and Transient Transitions to Immediately Transition States
  • Delay XState Events and Transitions
  • Invoking a Promise for Asynchronous State Transitions in XState
  • Invoke Callbacks to Send and Receive Events from a Parent XState Machine
  • Invoke Child XState Machines from a Parent Machine

Taught by

Kyle Shevlin

Reviews

4.6 rating at egghead.io based on 371 ratings

Start your review of Introduction to State Machines Using XState

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.