Skip to content

Instantly share code, notes, and snippets.

@kuroski
Created August 14, 2020 07:38
Show Gist options
  • Save kuroski/eda2a079c43af9e97b55586c12b5bd8b to your computer and use it in GitHub Desktop.
Save kuroski/eda2a079c43af9e97b55586c12b5bd8b to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
function invokeFetchBreeds() {
return fetch("https://api.thecatapi.com/v1/breeds").then(response =>
response.json(), error => Promise.reject(error)
);
}
const fetchMachine = Machine({
id: "cat-wiki",
context: {
breeds: [],
breed: {}
},
initial: "loading",
states: {
loading: {
invoke: {
id: "fetch-breeds",
src: invokeFetchBreeds,
onDone: {
target: "loaded",
actions: assign({
breeds: (_, event) => event.data
})
},
onError: "failed"
}
},
loaded: {
type: "final",
states: {
selected: {}
},
on: {
SELECT: {
target: ".selected",
actions: assign((context, event) => {
console.log(context, event)
const selected = context.breeds.find(
({ name }) => name === event.name
);
return {
...context,
selected
};
})
}
}
},
failed: {
on: {
RETRY: "loading"
}
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment