#2 Subject 作为事件总线(Event Buses)

上一篇讲到Subject既是Observable，又是observer,它拥有2种特质所有的方法，所以我们可以将其作为事件总线，手动的分发事件和接收事件

例如

var subject = new Rx.Subject()

var observerA = {
  next: function(x) { console.log('观察者A ' + x);},
  error: function(err) { console.log(err); },
  complete: function() { console.log('A完成'); }
}


subject.subscribe(observerA) // 作为observable 被其它observer订阅

var observerB = {
  next: function(x) { console.log('观察者B ' + x);},
  error: function(err) { console.log(err); },
  complete: function() { console.log('B完成'); }
}

setTimeout(() => {
  subject.subscribe(observerB) // 作为observable 被其它observer订阅
}, 2000)

setTimeout(() => { // 2s后发出事件
  subject.next(10)
}, 2000)

subject.next(1) // 作为observer 发出事件
subject.next(2)
subject.next(3)

打印结果

"观察者A 1"
"观察者A 2"
"观察者A 3"
"观察者A 10"
"观察者B 10"

比如在react中的应用

class Counter extends React.Component {
  state = {
    count: 0
  }
  subject = new Rx.Subject()
  subject.map(et => +1) // 拥有observable所有的方法
      .scan((acc, x) => acc + x)
      .delay(1000)
      .subscribe(v => {
        this.setState({
          count: v
       })
   })

  render() {
    return (
      <div onClick={ev => this.subject.next(ev)}>  // 作为observer 分发事件
         { `${this.state.count}} Hello ${this.props.name}` }
      </div>
    )
  }
}

ReactDOM.render(<Counter name="james" />, rootDom);