XState Tutorials

#1

Number Input

import { createMachine } from "xstate";

/**
 * The goal is to create a number input that you can
 * adjust by clicking on the + and - buttons.
 *
 * Clicking on the + button will fire the INCREMENT
 * event at the state machine.
 *
 * Clicking on the - button will fire the DECREMENT
 * event.
 *
 * Use the 'Intro' button above to see a video explaining
 * the problem, and the 'Solution' button for a video
 * with a solution.
 */
export const machine = createMachine({
  context: {
    num: 0,
  },
});

/**
 * Helpful docs:
 *
 * Transitions:
 * https://xstate.js.org/docs/guides/transitions.html
 *
 * Actions on transitions:
 * https://xstate.js.org/docs/guides/actions.html#api
 *
 * Context:
 * https://xstate.js.org/docs/guides/context.html#context
 *
 * Assign action:
 * https://xstate.js.org/docs/guides/context.html#assign-action
 */