Construct Sturdy UIs with XState
Isaac Mann
- xstate
>=4.6.7
Our applications have lots of states that they can be in.
We usually remember “Loading” and “Successful”. If we’re having a particularly good day, we’ll get “Error” handled as well.
But what about other states that our application can be in?
Things like “Haven’t requested yet” or “The request was successful but there isn’t any data for us to show”.
It’s frustrating to think you’re “done” and then an edge case shows up (and this cycle repeats at least one more time).
Fed up with forgetting to handle the edge cases that appear when developing UIs, Isaac Mann started looking for a solution.
The answer? State machines.
In this course, Isaac will teach you how to plan and visualize your application’s states and the transitions between them through the creation of a React & XState powered Star Wars quiz app.
Listen to Isaac Mann tell you about this course:
What you'll learn:
- Handling HTTP request state
- Blocking state transitions with guards
- Parallel state transitions
- Communicating between state machines in different components with the Actor Model
- Saving previous state history
Prerequisites:
Learner Reviews
- How will you use what you learned from this collection?
To manage my states in big applications
fernando pineda5 years ago - How will you use what you learned from this course?
Good introduction. But that is all I can say about it. For instance, I wish there was more information about how xstate-context and component states work together to limit/control rendering. I wish there were more on how to execute custom actions. I hope this helps. - E
EdmundsEcho5 years ago - What would make this course a 7 for you?
There is so much amazing and (hard to find!) critical information here on how to integrate XState with an actual React app and how to handle network requests and responses and update the UI. For some reason I found the videos to be a little too quick for me so I found myself rewinding and pausing a lot. Both to look at the code (and in the code section) and to think about what was said. Thanks for making this.
Eric Pan5 years ago - What did you like about this course?
Isaac shows practical examples of how to utilise XState in an app with an easy to understand demo. He then progressively enhances the app with a clear demonstration which focuses on each of the XState features.
Colin5 years ago - What would make this course a 7 for you?
Thanks Isaac.
I liked the course, but I would appreciate to have started from zero when you explained the matching, due most of the code was there and you just did some changes to make it work.
The fetch machine and the force machine were very well explained.
Ivan Bacallado5 years ago - What did you like about this course?
Covers a lot in an easy to follow manner! A future topic might be how/when context should be used for state mgmt vs redux/vuex. I just read xstate 4.x has interpreters - help on when to use that would also be valuable.
Steve Schwarz5 years ago
