Using XState for the FavoritedImages surface

In the previous section, we set up a basic machine that could be used to control the user flow in the app. Let’s add a new machine, for our real-world use case: liking images in a social media clone app.

We’ll start by creating a machine minimum viable product (MVP):

// src/machines/likeImagesMachine.js
import { createMachine } from "xstate";
export const likeImagesMachine = createMachine({
  id: "likeImagesMachine",
  context: {
    likedImages: [
       { Example Image Object 1},
       { Example Image Object 2}
       …
       ],
  },
  initial: "loading",
  states: {
    loading: {},
    ready: {},
    error: {}...