import React, { useEffect, useMemo, useState } from "react"; import { assign, interpret, Machine } from "xstate"; import ReactDOM from "react-dom"; import "./styles.css"; export function useMachine(machine) { // Keep track of the current machine state const [current, setCurrent] = useState(machine.initialState); // Start the service (only once!) const service = useMemo( () => interpret(machine) .onTransition(state => { // Update the current machine state when a transition occurs if (state.changed) { setCurrent(state); } }) .start(), [] ); // Stop the service when the component unmounts useEffect(() => { return () => service.stop(); }, []); return [current, service.send]; } function fakePayment() { return new Promise((resolve, reject) => { setTimeout(() => { const dice = Math.floor(Math.random() * Math.floor(2)); if (dice === 0) return resolve("Payment succeeded."); return reject("Payment failed."); }, 1000); }); } const stateMachine = Machine({ initial: "idle", context: { msg: "" }, states: { idle: { on: { SUBMIT: [ { target: "loading", cond: (ctx, event) => event.data.name !== "" && event.data.card !== "" }, { target: "error" } ] } }, loading: { invoke: { id: "doPayment", src: () => fakePayment(), onDone: { target: "success", actions: assign({ msg: (ctx, event) => event.data }) }, onError: { target: "error", actions: assign({ msg: (ctx, event) => event.data }) } } }, error: { on: { SUBMIT: { target: "loading", cond: (ctx, event) => event.data.name !== "" && event.data.card !== "" } } }, success: { type: "final" } } }); const App = () => { const [machine, send] = useMachine(stateMachine); const [form, updateForm] = useState({ name: "", card: "" }); console.log(machine.context); return (

current state: {machine.value}

State Machine Payment Form

{machine.matches("error") ? (

{machine.context.msg ? machine.context.msg : "Oh no! No error message."}

) : null}

); }; const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);

XState with React Hooks