Как использовать BehaviorSubject в приложении React - PullRequest
Новая
       8

Как использовать BehaviorSubject в приложении React

0 голосов
/ 16 января 2019

Мое основное приложение (не реагирует) имеет объект данных BehaviorSubject. Пользователь нажимает кнопку, и он может открыть сторону приложения React в окне дочернего браузера.

Реагирующая сторона приложения имеет компонент, который принимает данные и создает таблицы с данными.

Находясь в дочернем окне, я могу перейти к своему отладчику и сделать следующее, чтобы увидеть изменения значений субъекта в консоли. 

window.opener.app.varCollection$.subscribe({
  next: (v) => console.log(JSON.stringify(v))
});

Как передать эти данные компоненту реакции ниже? Я не уверен, как будет работать подписка в React. 

<DataPanel jsonData={this.state.sysvarData} ></DataPanel>

1 Ответ

0 голосов
/ 17 января 2019

Вы можете сделать это на самом компоненте или на его родительском элементе и передать ему значение в качестве реквизита.

Просто подпишитесь на наблюдаемое в событии componentDidMount : 

componentDidMount() {
   window.opener.app.varCollection$.subscribe(val => this.setState({value:val}))
}

Рекомендуется обрабатывать отмену подписки на событие componentWillUnmount , используя оператор takeUntil и Subject: 

unmount$ = new Subject() //component class property

componentDidMount() {
   //if using rxjs 6:
   window.opener.app.varCollection$
     .pipe(takeUntil(this.unmount$)) 
     .subscribe(val => this.setState({value:val}))
   //if using rxjs 4 or 5:
   window.opener.app.varCollection$
     .takeUntil(this.unmount$)
     .subscribe(val => this.setState({value:val}))
}

componentWillUnmount() {
   this.unmount$.next(true)
}

render() {
   const {value} = this.state //now you have the value on the render funtion
   ...
}
...