Handle http request state with XState
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.
As complement, there is this video guys: https://www.youtube.com/watch?v=VU1NKX6Qkxc
Visualizer at https://xstate.js.org/viz/z.
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?
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. ;)
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! :)