Generated by XState Viz: https://xstate.js.org/viz

machine.js

// Tutorial from docsk 
// https://xstate.js.org/docs/tutorials/reddit.html#modeling-the-app


// Sample SELECT Event
const selectEvent = { type: 'SELECT', name: 'reactjs' };

const invokeFetchSubreddit = context => {
  const {subreddit} = context;
  return fetch(`https://www.reddit.com/r/${subreddit}.json`)
  .then(res => res.json())
  .then(json => json.data.children.map(child => child.data));
}

const redditMachine = Machine({
  id: 'reddit',
  initial: 'idle',
  context: {
    subreddit: null,
    posts: null
  },
  states: {
    idle: {},
    selected: {
      initial: 'loading',
      states: {
        loading: {
          invoke: {
            id: 'fetch-subreddit',
            src: invokeFetchSubreddit,
            onDone: {
              target: 'loaded',
              actions: assign({
                posts: (context, event) => event.data
              })
            },
            onError: 'failed',
          }
        },
        loaded: {},
        failed: {}
      }
    }
  },
  on: {
    SELECT: {
      target: '.selected',
      actions: assign({
        // event.name is from .send passed in data
        subreddit: (context, event) => event.name
      })
    }
  }
}, {devTools: true});