No BS TS #29 - Typescript/React - Using xState

We try out a Finite State Machine approach to state management by porting our Todo example to xState.

00:00 Introduction
00:30 The existing application
00:54 XState
01:48 Installation
02:39 Creating the machine
04:45 Creating the events
08:18 Using the machine
12:09 Adding "working" UI
13:43 The visualizer
14:50 Building "working" functionality
17:57 Entry/exit transitions
20:00 Guards
21:57 Outroduction

👉 What's my theme? Night Wolf [dark blue]
👉 What's that font? MonoLisa

💢 Watch our other videos:

Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.

#typescript #NoBSTS #react #xState

[michaelta]

I've never used xState in my work before but your example makes me want to learn more about it! Thank you so much for another great video as always, much appreciated!

[briananderson]

I'm just learning XState with React and this was a simple and straightforward example, appreciate it!

[csy]

I find state machine so long that I think I'd end up breaking it into files or functions for each state and one more for guards. It is a very clear way to see how the state transitions though. I like it. It is such a shift from having 1 reducer for each data type you have 1 state machine for each data type and then 1 reducer and one pointer for each state to point to the next state and something like a mount/unmount function.

[clusterbyblocks]

Rxjs will be a great add-up to the series! yeah! Very clear intro to xstate I was having doubts on how to use it which are the benefits. Thanks for the tips!!

[lawrencejones]

Love the video. Had tried to understand xState before finding this video and struggled. This video makes me want to try xState again!

[rachouan]

I'm gonna be migrating over a few of our more complex logic using xstate, this is so helpful! Thanks Jack!

[eleah]

Hello Jack, Thanks for this encyclopedic series!

[aleksandarjocovic]

I just started learning xstate and I was looking at good example with typescript. This was great simple example.

[nattysweg]

What an amazingly bloated package! Could definitely see how it could be useful, though not for majority of use cases... Thank you Jack!!

[clobbenorman]

Great explaining and intro to XState! Thanks a lot!

[Landexx]

Great video! I love how declarative xState is. I am not building really complex apps, so react context is enough for my use cases. However, I will build a side project just to see the cool stuff it can do!

[CesarWilliamBR]

Great explanation about xstate. Thanks for sharing!

[jamescat]

I will be using xstate and you have got me going, thanks

[mjohnson]

This has been the best learning series on TypeScript I've stumbled upon in a coo minute. Thanks for your videos!

[Papapiishu]

This is one of those packages that look really cool, but I have a hard time finding a real-world application for it in any of my current projects. Always nice to put another tool in the toolbox though.

[gewoonwoutje]

Great video, Jack! I wouldn't recommend any novices to learn xstate (I'm having some big maintainability issues with it's black-boxy, docs-required API), but the concept of finite state machines is powerful and every programmer should know about them

[madrusu]

A great introduction as usual Jack. You have a gift of making complex concepts look simple. Not enough to learn and become an expert but definitely enough to get a good idea about that concept's potential value.

[John-Dennehy]

I'm curious if xstate and the useMachine hook is a good approach to white labelling a react application. i could change the imports to point to different (but close enough) business logic depending on the business? 🤔

[ShaggyKris]

This series has been great for both learning TS and just learning new React paradigms in general. When would you justify using xState over a simple useReducer? It seems like this could be done easily enough there, but I'm curious how much more value xState provides

[jaymartinez]

I’ll stick to Zustand 😉 Great tutorial though 👏🏾