reactjs - 如何将 rxjs observables 与普通 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 不是函数

那么我该如何使用 new Observable() 或 Observable.create() 并将其用于普通 React 组件的 setState 呢？

Answer 1

因为 .next() 是一个 Observer 的方法，不是 Observables。

Subject 起作用的原因很简单，因为 Subject 本身既是一个 observer 又是一个 observable。当您调用 subject.next() 时，您只是更新了 observable 部分，并通知所有观察者有关更改的信息。 p>

当谈到Observable和Observers时，有时可能会很困惑。为了简单起见，可以这样想:Observable 是产生数据的人，又名数据生产者；而观察者是消费数据的人，又名数据消费者。打个简单的比方，消费者吃掉生产出来的东西。同样的道理，观察者(消费者)观察(吃掉)可观察的(生产的)。

在您的上下文中(或者至少是 React/Redux 范例)，Subject 效果更好。这是因为 Subject 有状态。它跟踪数据生产的值(value)(Observable 的工作)。每次可观察对象(Subject 中的对象)发生更改或更新时，任何订阅该 Subject 的观察者都会收到通知。看到这里类似于 redux 的模式了吗？每次你的 redux 存储更新时，你的 View 都会收到通知(并因此更新)。事实上，如果您非常习惯响应式(Reactive)编程，您可以完全消除 redux 存储的使用，并用 Subject 和/或 BehaviourSubject 完全替换它们。

对于 Ben Lesh 的帖子，他只是说明这一点:如果可能，请始终使用 Observable，仅在真正需要时才使用 Subject。在那篇特定的文章中，他指出点击事件可以只是一个 Observable；使用 Subject 是不合适的。但是，在您的上下文中，即react/redux，使用 Subject 没问题 - 因为 Subject 用于跟踪存储的状态，并且 不是点击事件处理程序。

TLDR:

1. 如果您想跟踪变量的状态，请使用 Subject
2. .next() 是 Observer 的方法，而不是 Observable。