JSFiddle - React, Tailwind, and code Playground

by Farzad YZ

HTML

<script src="https://unpkg.com/[email protected]/dist/xstate.js"></script>

JavaScript

console.clear();

const {
  Machine
} = XState;

const createFetcher = name => new Machine({
  key: name,
  strict: true,
  initial: "Idle",
  states: {
    Idle: {
      on: {
        Pending: "Pending"
      }
    },
    Pending: {
      on: {
        Success: "Success",
        Failure: "Failure"
      }
    },
    Success: {
      on: {
        Idle: "Idle"
      }
    },
    Failure: {
      on: {
        Idle: "Idle"
      }
    }
  }
});



let githubUserFetcher = {};
githubUserFetcher.machine = createFetcher('githubUserFetcher');
githubUserFetcher.state = githubUserFetcher.machine.initialState;

console.log(githubUserFetcher.state.value);
githubUserFetcher.state = githubUserFetcher.machine.transition(githubUserFetcher.state, "Success");
console.log(githubUserFetcher.state.value);