Generators for async sequences

[natew]

Looking at the latest update in 05 - Async, I really like the syntax coming together here. It seems to give you most of what you need to write components as functions, with the additional benefit of async ordered actions, and what looks to be some sort of first-class redux style internal dispatch system.

I'd like to implement this. I've actually come up with a syntax very similar that we've been testing (emailed you a while back), and it's actually not too far off of this.

One big question comes up. This seems to either imply that you are re-instantiating the move function every time the view renders, or you are simply not showing a way to have a render() function equivalent. That being one of the big upsides of React, I'm curious.

I could imagine extending it to be something like this:

let Foo : Component<PropTypes> = ({ state = initState, props, update, dispatch }) => {
  function* move({ x, y }, cancelMove) {
    yield state.cancelMove()
    yield update({ ...state, cancelMove, x, y, })
    yield sleep(500)
    yield dispatch({ action: 'STOPPED_MOVING' })
    yield update({ ...state, stops: stops + 1 })
    yield props.onStop({
      lastPosition: [state.x, state.y]
    }, cancel)
  }

  return (props, state) => {

    // do stuff..

    return (
      <div
        onMouseMove={move}
        onMouseLeave={e => state.cancelMove()}>
        Stopped moving {state.stops} times.
      </div>
    )
  }
}

Where the returned function now lets you react to things. Though this adds a bit of verbosity and repitition. I could be way off though here, is it really not a big deal to re-instantiate functions within the render? Or was this just a simple sketch and hasn't accounted for the render function case.