XState - Data Loading Service - Finite State Machines in React

[@MathieuGosbee]

Day 2 on learning XState, and this has helped me immensely, and something has clicked. I can now do relatively simple things using state machines!

[@leighhalliday]

Nice! Thanks for sharing, Matbee :)

[@sourenasahraian2055]

Great intro , much obliged !

[@JaeTask]

Really helpful thanks. I watched a tonne of david's xstate presentation but he tends to focus on what it can do instead of how we do it. Something just clicked :) nice one

[@leighhalliday]

Thank you very much Jae! Xstate was pretty hard for me to wrap my head around but provides a ton of functionality.

[@migueldomingos4570]

Amazing video as always;-) But i just want to say that the Machine function doesnt need new.

[@leighhalliday]

Thank you Miguel!!

[@migueldomingos4570]

@@leighhalliday You are welcome

[@stevereid636]

Awesome! Thanks ever so much for this.

[@leighhalliday]

Thanks for watching, Steve!

[@vdev6797]

Please make more videos on Xstate + React + Redux ...!!! Pleaseeee :-))

[@leighhalliday]

I'll do my best! I don't use redux much, but I aim to keep making videos :)

[@g-luu]

@@leighhalliday Hi Leigh i might be confused but doesn't xstate replace redux in this case?

[@migueldomingos4570]

@@g-luu it does

[@kirankothandan5529]

Awesome

[@leighhalliday]

Thanks Kiran!

[@petrpacas]

Nice presentation, thanks 💪

[@leighhalliday]

Thanks, Pakas, glad you enjoyed it!

[@les2997]

If you could cover in a future video more advanced topics such as actors, this would be much appreciated.

[@leighhalliday]

Hey Les! Thanks for the suggestion.

[@migueldomingos4570]

I hope that you dont mind(if you do please notify me so i can take action) that i made two codepens based of these tutorials.

[@leighhalliday]

Thank you Miguel, I don't mind at all!

[@migueldomingos4570]

@@leighhalliday Thanks bro

[@louis345]

Could you do a video for login form?

[@leighhalliday]

Already done my friend! Auth in Next.js: kzbin.info/www/bejne/aaKXc6d5r9qlr7s User Registration Form: kzbin.info/www/bejne/o6O3gaWYiNR0rpI

[@romanmunar]

Hey leigh, I've been tinkering with xstate lately, my quick questions is, what state would you put in a machine and what you dont. For me, putting all state in machines is entirely feasible, and I haven't ran into issues yet.

[@leighhalliday]

Hey Roman! I think it works best for things that have "finite" states... loading an HTTP request is: initial, loading, completed, error... and only certain transitions between those states make sense. You can't go from completed to error, as they are both "end" states. You can't arrive at "completed" without first going through "loading".

[@romanmunar]

@@leighhalliday I see, I am using it as how you would with a context api. I should think of it more as sequence of events. interesting, it's as if states have predefined reducers on their own. This is tough, this requires extensive planning before diving in. Also, There is this new library from react-spring called jolai, a mini recoil-like state manager if possible, do check it out.

[@wateva9000]

A cool video, but I dont see that this usecase actually needs a statemachine. I mean what you did I achieved with much less lines. Definitely cool for experimenting with it, but still struggling to find the actual usecase for it. Perhaps some UI state changes for like drag n drops etc..Or some forms that are tighly coupled in the ux. let fooState = success; let page = 1; const fooStates = [success, loading, error] async loadFoo() try { fooState = loading await load( { page }); page +=1; fooState = success } catch { fooState = error }

[@leighhalliday]

Fair enough! I often make these videos just to learn a library myself :) The point isn't to say "you have to use this in this use-case" but to introduce concepts... maybe it doesn't fit here, but it'll be useful elsewhere! Being transparent, I haven't used xState much in the real world, but I can see how it is useful to define a finite list of states and the rules and events which would cause it to transition from one state to the next. For example, it doesn't make sense to go from "success" to "error" without passing through the "loading" state... by defining the state chart with xState, especially with their visualizer (xstate.js.org/viz/) it becomes much clearer, allowing you to define rules. But yea, it's a lot of boiler plate and code, no?

[@wateva9000]

@@leighhalliday Yea.. don't get me wrong is a good tutorial and I did create the chart myself as well following the video. Just having problems myself to find a realworld usecase :D Would be super cool do find a real one and then put it on a pull-request :D

[@migueldomingos4570]

@@wateva9000 For simple state it doesnt make sense but for more complex state it is amazing! It is a joy! You define exacly what can happen and when. No more ui bugs! But yeah i wouldnt recommend it to do simple stuff like opening a dropdown

[@migueldomingos4570]

@@morpheuspk94 He explains it in thsi video: kzbin.info/www/bejne/fKvPpqWwqKiKaq8