illustration for Introduction to State Machines Using XState

Introduction to State Machines Using XState

Instructor

Kyle Shevlin
58m closed-captioning
Updated 2 weeks ago
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.6
803
people completed
Bookmark
Download
RSS

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.

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Credits

Maxime Bourgeois (illustration)

Listen to Kyle Shevlin tell you about this course:

What you'll learn

  • Build a simple machine for a piece of UI
  • Build Hierarchical, Parallel, and, History state machines
  • Identify the conditions & implement transition guards
  • Trigger Actions on transition
  • Handle infinite states when working with inputs
  • Understand Activities

Learner Reviews

  • Sergey
    3 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    I'm new to xstate and it was a great intro in such a great tool. Thanks

  • Juan Camacho
    3 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    This is a insightful course if you know basic theory of machines (in the mathematical sense)

  • Filipe Oliveira
    4 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Really detailed and easygoing introduction to XState. The official docs are pretty good but look a bit daunting at first. This course makes onboarding the XState train easier and faster! Now that I know what XState allows me doing, I can navigate through the official docs way better. Thanks for the course, Kyle!

  • Learner
    4 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What would make this collection a 7 for you?

    Excellent presentation. Thank you.

  • nicoandresr rodriguez
    5 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Great for know about state machines.

  • Stephen Weiss
    6 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    A fantastic, short introduction to State Machines with Xstate! The density of concepts is enormous and my imagination is running wild! Thanks Kyle!

Course Content

58m • 22 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers

    Introduction to Cloudflare Workers

    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout

    Create an eCommerce Store with Next.js and Stripe Checkout

    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use

    Practical Git for Everyday Professional Use

    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.