davidkpiano

Machine({
  initial: 'playing',
  context: {
    plays: 0
  },
  states: {
    playing: {
      on: {
        '': {
          cond: (context) => context.plays >= 3,

davidkpiano

const donutMachine = Machine({
  id: 'donut',
  initial: 'ingredients',
  states: {
    ingredients: {
      on: {
        NEXT: 'directions'
      }
    },
    directions: {

davidkpiano

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

davidkpiano

Machine({
  id: 'screen',
  initial: 'inactive',
  states: {
    inactive: {
      on: {
        TURN_ON: 'active'
      }
    },
    active: {

davidkpiano

const buttonFactory = id => {
  const toggleName = `TOGGLE${id}`
  return {
    id: `button${id}`,
    initial: 'off',
    states: {
      off: {
        on: {
          [toggleName]: 'on'
        }

davidkpiano

const initial = {};
const fetchMachine = Machine({
  id: 'panel',
  initial: 'waiting',
  context: initial,
  states: {
    waiting: {
      // always reset to initial context
      entry: assign(() => initial),
      on: {

davidkpiano

// No TypeScript
function add(a, b) {
  return a + b;
}

// Type function arguments
//              vvvvvv     vvvvvv
function add(a: number, b: number) {
  return a + b;
}

davidkpiano

const ticker = ctx => cb => {
  const interval = setInterval(() => {
    cb("TICK");
  }, ctx.interval * 1000);
  return () => clearInterval(interval);
};

const timerExpired = (ctx) => ctx.elapsed >= ctx.duration;

davidkpiano

Machine({
  id: 'questionnaire',
  initial: 'symptoms',
  states: {
    symptoms: {
      on: {
        NEXT: 'fluTest'
      }
    },
    fluTest: {

davidkpiano

Machine({
  id: 'Dog API',
  initial: 'idle',
  context: {
    dog: null
  },
  states: {
    idle: {
      on: {
        FETCH: 'loading'