awareness

Overview

• Easily create rich actions
• Use generator functions for animation
• Use async functions
• Transform existing state just like React’s functional setState((prevState) => newState)

Libraries

• React library
• Preact library
• Redux library

Handler types

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 }
}