rxjs 관측 가능성과 일반 반응 구성요소를 통합하려면 어떻게 해야 하는가?

rxjs 관측 가능성과 일반 반응 구성요소를 통합하려면 어떻게 해야 하는가?

나는 Rxjs를 처음 접하고 외부 포장지/도서관 없이 간단한 리액션 구성 요소와 통합하는 방법을 배우려고 한다.여기서 할 수 있어

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

문제가 되는 것은 벤 레쉬와 같은 전문가들에 따르면 이것이 알려진 안티패턴인 피사체를 사용한다는 것이다: https://medium.com/@benlesh/on-the-the-on-the-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일반 반응 구성 요소와 함께 사용하시겠습니까?

왜냐하면.next()이다Observer의 방법, NOT Observables.

이유Subject단지 때문에 효과가 있다.Subject그 자체는 둘 다이다.observer그리고observable. 전화할 때subject.next(), 당신은 단지 업데이트하고 있을 뿐이다.observable헤어지고, 모든 사람에게 통지하다observers그 변화에 대해서.

에 관한 한 때때로 꽤 혼란스러울 수 있다.Observable그리고Observers. 간단히 말해 다음과 같은 방법을 생각해 보십시오.Observable데이터를 생산하는 사람, 즉 데이터 생산자; 한편Observer데이터를 소비하는 사람, 즉 데이터 소비자.간단히 비유하자면 소비자는 생산되는 것을 먹는다.동일한 토큰에 대해 관찰자(소비자)는 관찰 가능한(생산된)을 관찰한다.

컨텍스트(또는 최소한 반응/감소 패러다임)에서Subject더 잘하다그것은 때문이다.Subject위엄이 있다데이터 생산에 대한 가치 추적(작업)Observable관찰 가능(주제 내부의 것)이 변경되거나 업데이트될 때마다observers에 가입되어 있는Subject통보가 있을 겁니다여기 환원제와 비슷한 패턴이 보이시죠?Redex 스토어가 업데이트될 때마다 뷰에 알림이 표시되고 그에 따라 업데이트됨.실제로 반응형 프로그래밍에 매우 익숙하다면, 환원형 스토어의 사용을 완전히 없애고, 다음으로 완전히 교체할 수 있다.Subjects 및/또는BehaviourSubjects

벤 레쉬의 직책에 대해 그는 단지 이렇게 말하고 있을 뿐이다.항상 사용Observable가능하다면 오직 사용하시오.Subject정말 필요할 때 말이야그 특정 게시물에서, 그는 클릭 이벤트가 단지 하나의 이벤트일 수 있다고 말하고 있다.Observable; 사용Subject부적절할 겁니다그러나 리액션/리축스와 같은 컨텍스트에서는Subject괜찮다. 왜냐하면Subject클릭 이벤트 핸들러가 아닌 스토어의 상태를 추적하기 위해 사용된다.

TLDR:

1. 사용하다Subject 수완의 추적하고 .
2. .next()이다Observer의 방법이 아닌Observable.

참조URL: https://stackoverflow.com/questions/46679701/how-do-i-integrate-rxjs-observables-with-a-plain-react-component