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

machine.js

const state = {
  idle: "idle",
  fetching: "fetching",
  success: "success",
  error: "error"
};

const todoActions = {
  fetchTodos: "fetchTodos",
  cancelFetching: "cancelFetching",
  disableFetching: "disableFetching",
  enableFetching: "enableFetching"
};

Machine({
  id: "fetchTodos",
  initial: state.idle,
  context: {
    canFetch: true,
    data: [],
    error: null
  },
  states: {
    idle: {
      on: {
        [todoActions.fetchTodos]: {
          target: state.fetching, // next target
          cond: "canFetch" // condition to move to the next target state
        },
        [todoActions.disableFetching]: {
          actions: "disableFetching"
        },
        [todoActions.enableFetching]: {
          actions: "enableFetching"
        }
      }
    },
    fetching: {
      on: {
        [todoActions.cancelFetching]: state.idle
      },
      // Invoke service
      invoke: {
        src: "fetchTodos", // source event to invoke
        onDone: {
          target: state.success,
          actions: "saveTodos"
        },
        onError: {
          target: state.error,
          actions: "handleError"
        }
      }
    },
    success: {
      on: {
        [todoActions.fetchTodos]: state.fetching
      }
    },
    error: {
      on: {
        [todoActions.fetchTodos]: state.fetching
      }
    }
  }
});