Introducing Construct Sturdy UIs with XState

Handle http request state with XState

Invoke an XState Service when Entering a State

Block a State Transition with a Guard

Control Transitions Order with Parallel States

Communicate between State Machines in Different Components

Save Previous States with a History State

Execute Code when Entering and Exiting States using Activities

Construct Sturdy UIs with XState

State machines give you the power to make sturdy UIs for three main reasons:

1. They encourage planning, so you know ahead of time what states your component should handle.
2. They've been used and refined for decades, so the technology has very few unexpected edge cases.
3. They can be rendered visually, so you can understand at a glance what is happening.

In Construct Sturdy UIs with XState, we'll create an app that allows users to match a Star Wars character with their home world.  We'll use XState to ensure that the UI is predictable and resilient.

https://app.egghead.io/api/v1/lessons/react-introducing-construct-sturdy-uis-with-xstate/subtitles

Isaac Mann: [0:00] Welcome to the "Construct Sturdy UIs with xstate" course. My name is Isaac Mann and I'm excited to share with you this course on how to use xstate inside of your apps. There are three main reasons why I love xstate.

[0:15] The first is that state machines encouraged planning out your component before you create it, and planned code is better code. The second reason is that state machines are a very old idea which means they've been tested and proven.

[0:31] The third reason is that sometimes diagrams communicate a lot better than text, and the xstate visualizer is a great way of communicating what a state machine is doing.

[0:41] In this course, we'll build out an app that challenges the user to match a "Star Wars" character with their home world. Along the way, we'll explore how to map out the states and events of your state machine and create the transitions that connect these states together.

[0:56] We'll explain how to use context to store extra data and use actions and services to interact with the world outside of the state machine. We'll build larger state machines that have sub-states inside of them and use guards to decide at the time of an event which transition to take.

[1:14] We'll look at using parallel states to model situations where a state machine can be in more than one state at the same time. We'll create multiple machines that live inside of different components and explain how to coordinate between the different machines by passing messages through component props.

[1:32] We'll use history states as a way to have the state machine remember where it was in a particular area so you can return to it later. Finally, we'll use activities to start a process when a state is entered and ended when the state is exited.

Introducing Construct Sturdy UIs with XState

Share this video with your friends

Course

Construct Sturdy UIs with XState