Writing Handlers

There are several options to choose for writing handlers. Handlers are pure functions that take the previous state and transform it in some way.

You have the full power of ES6 available: async functions, generator functions, or just a good old-fashioned function. You can even create a generator function that yields promises (great for animation).

• Function returning new state
• Function returning function that transforms old state to new state
• Async function returning new state
• Generator function yielding new state
• Generator function yielding function that transforms old state to new state
• Generator function yielding Promise resolving to new state

Function returning new state

const changeCarrots = () => ({
  carrots: 25
})

Function returning function that transforms old state to new state

const addCarrots = () => ({ carrots }) => ({
  carrots: carrots + 10
})

Async function returning new state

const changeCarrotsInFuture = async () => {
  const res = await fetch('/api/carrots')
  const data = res.json()
  return { carrots: data.carrots }
}

Or with Promise:

const changeCarrotsInFuture = () => {
  return fetch('/api/carrots')
    .then(res => res.json())
    .then(data => ({ carrots: data.carrots }))
  })
}

Generator function yielding new state

// Will update state on each frame: 0, 1, 2, 3, 4, 5
function * animateCarrotsZeroToFive() {
  yield { carrots: 0 }
  yield { carrots: 1 }
  yield { carrots: 2 }
  yield { carrots: 3 }
  yield { carrots: 4 }
  yield { carrots: 5 }
}

Generator function yielding function that transforms old state to new state

// Will update state for 10 frames: carrots+1, carrots+2, … carrots+9, carrots+10
function * animateCarrotsByTen() {
  let total = 10
  while (total > 0) {
    yield ({ carrots }) => { carrots: carrots + 1 }
    total -= 1
  }
}

Generator function yielding Promise resolving to new state

// Will use result of fetching `url` and store it in state
function * loadURL(url) {
  yield { loading: true }
  yield fetch(url).then(res => res.json())
  yield { loading: false }
}