Handle http request state with XState

Share this video with your friends

Send Tweet

Finite state machines force you to do some up front thinking and be explicit about the states and transitions that are valid for your program. We’ll use the XState visualizer tool to create a state machine to manage an http request.

mathias gheno
mathias gheno
~ 5 years ago

As complement, there is this video guys: https://www.youtube.com/watch?v=VU1NKX6Qkxc

Dat
Dat
~ 5 years ago
jake chapman
jake chapman
~ 5 years ago

How exactly does the fetchMachine know to only make 1 request? You're not disabling the fetch button which means the sentToFetchMatchine is passing type "fetch" multiple times, which is running the action which does the fake API call. So what is stopping multiple calls to the fake API from happening?

jake chapman
jake chapman
~ 5 years ago

How exactly does the fetchMachine know to only make 1 request? You're not disabling the fetch button which means the sentToFetchMatchine is passing type "fetch" multiple times, which is running the action which does the fake API call. So what is stopping multiple calls to the fake API from happening?

Ok I totally understand this now. It's because we're in the 'pending' state and pending has no on for 'fetch', so no matter how many times the event fetch is sentToFetchMachine, it can never go into that state again until it goes back to failure/success.

Mind, blown. ;)

Stefan
Stefan
~ 5 years ago

How exactly does the fetchMachine know to only make 1 request? You're not disabling the fetch button which means the sentToFetchMatchine is passing type "fetch" multiple times, which is running the action which does the fake API call. So what is stopping multiple calls to the fake API from happening?

Ok I totally understand this now. It's because we're in the 'pending' state and pending has no on for 'fetch', so no matter how many times the event fetch is sentToFetchMachine, it can never go into that state again until it goes back to failure/success.

Mind, blown. ;)

Whoa thanks! :)