How to integrate rxjs observables with a simple React component?

Question

I am new to Rxjs and am trying to learn how to integrate it with a simple React component without any external shell / library. I got this work here:

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

I am worried that this uses themes that are famous anti-patterns according to experts like Ben Lesh: https://medium.com/@benlesh/on-the-subject-of-subjects-in-rxjs-2b08b7198b93

I tried to do this:

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

}

But this is not an error: counter.next is not a function

So, how to use new Observable()or Observable.create()and use it for setStateusing a simple React component?

Answer 1

.next() Observer, Observables.

, Subject , Subject observer observable. subject.next(), observable observers .

, Observable Observers. , : Observable - , , , ; Observer - , , , . , . () () ().

(, , React/Redux), Subject . , Subject . ( Observable). , ( ) , observers, Subject, . , ? , , (, , ). , , Subject / BehaviourSubject s.

: Observable, , Subject , . , Observable; Subject . , , /, Subject - Subject , click.

TLDR:

1. Subject,
2. .next() - Observer, Observable.