gen.js

// the big idea is to have a generator that runs 
// for the existence of the component's life.  

// so to answer the question "how many", assume a generator per component.
// this could be 10s, worst case 100s? 

// assume I'm using the super redux-saga library + some helpers (run, start, stop), 
// but this pattern would hold for js-csp, or any other generator type thing 


class Something extends React.Component {
  state = { x: 0, y: 0 }
  saga = function *(){
    while(true){
      let e = yield take('click')
      this.setState({ x:e.pageX, y: e.pageY })
    }
  }.bind(this)
  componentDidMount(){
    run(this.saga) // start listening 
  }
  componentWillUnMount(){
    stop(this.saga) //remove 
  }
  render(){
    return <div onClick={e => put('click', e)}>
      last click was - 
      x: {this.state.x} 
      y: {this.state.y}
    </div>
  }