Fetching Image Data

Learn about creating a simple image-fetching state machine in XState, handling different states, using the invoke property, and exposing fetched data to a parent machine.

We'll cover the following

Fetching data isn’t always the strong suit of state management libraries. After all, it’s not their basic responsibility. In the case of XState, however, fetching comes very naturally, as every Promise can be modeled as a state machine. At a high level, we need to kick off a function that will be in a default loading state. We’ll wait for something to happen with it—either resolve or reject—and go to the appropriate resolved or rejected states.

Image-fetching machine

Here’s how our image-fetching machine is shaping up:

Get hands-on with 1200+ tech skills courses.