如何将rxjs observable与一个简单的React组件集成？

Question

我是Rxjs的新手,我正在尝试学习如何将它与一个简单的React组件集成,而不需要任何外部包装器/库.我在这里工作了:

const counter = new Subject()

class App extends Component {

  state = {
    number: 0
  }

  componentDidMount() {
    counter.subscribe(
      val => {
        this.setState({ number: this.state.number + val })
      }
    )
  }

  increment = () => {
    counter.next(+1)
  }

  decrement = () => {
    counter.next(-1)

  }


  render() {
    return (
      <div style={styles}>
        Current number {this.state.number} 
        <br /> <br />
        <button onClick={this.increment}>Plus</button>
        <button onClick={this.decrement}>Minus</button>
      </div>
    )
  }

https://codesandbox.io/s/02j7qm2xw

我麻烦的是,根据像Ben Lesh这样的专家使用的主题是一种已知的反模式:https: //medium.com/@benlesh/on-the-subject-of-subjects-in-rxjs-2b08b7198b93

我试过这样做:

var counter = Observable.create(function (observer) {
  // Yield a single value and complete
  observer.next(0);

  // Any cleanup logic might go here
  return function () {
    console.log('disposed');
  }
});

class App extends Component {

  state = {
    number: 0
  }

  componentDidMount() {
    counter.subscribe(
      val => {
        this.setState({ number: this.state.number + val })
      }
    )
  }

  increment = () => {
    counter.next(+1)
  }

  decrement = () => {
    counter.next(-1)

  }


  // - render

}

但这失败了,错误: counter.next is not a function

那么我如何使用new Observable()或Observable.create()使用它来setState使用简单的React组件？

Answer 1

因为.next()是一种Observer方法,不是 Observables.

其原因Subject仅仅因为Subject它本身既是一个observer又是一个observable.当您致电时subject.next(),您只需更新observable部件,并通知所有observers有关更改的信息.

有时来到Observable和可能会很混乱Observers.为简单起见,请考虑这种方式: Observable生成数据的人,即数据生成者 ; 虽然Observer是消费数据的人,也就是数据消费者.简单来说,消费者会吃掉所生产的东西.出于同样的原因,Observer(消费者)观察(吃掉)可观察的(生产的).

在您的上下文中(或至少是React/Redux范例),Subject效果更好.那是因为Subject有州.它记录了数据生成的价值(作业Observable).每当observable(Subject中的一个)发生变化或更新时,任何observers订阅该Subject遗嘱的人都会收到通知.在这里看到类似于redux的模式？每次更新redux商店时,您的视图都会得到通知(并因此更新).实际上,如果您非常习惯于反应式编程,则可以完全消除redux存储的使用,并完全用Subjects和/或BehaviourSubjects 替换它们.

对于Ben Lesh的帖子,他只是说明了这一点:Observable如果可能的话,总是使用一个,只Subject在真正需要的时候使用.在那篇特定的帖子中,他声称点击事件可能只是一个Observable; 使用Subject将是完全错误的.但是,在您的上下文中,即react/redux,使用Subject很好 - 因为Subject它用于跟踪存储的状态,而不是 click事件处理程序.

TLDR:

1. 使用Subject,如果你想保持可变的状态跟踪
2. .next()是Observer方法,而不是Observable.