如何在 React 应用中使用 BehaviorSubject答案

【问题标题】：How to consume BehaviorSubject in React app如何在 React 应用中使用 BehaviorSubject
【发布时间】：2019-01-16 17:51:55
【问题描述】：

我的主应用程序（没有反应）有 BehaviorSubject 数据对象。用户单击一个按钮，他可以在子浏览器窗口中打开应用程序的 React 端。

应用程序的反应端有一个组件，它获取数据并使用数据创建表。

在子窗口中时，我可以转到调试器并执行以下操作以查看控制台中的主题值变化。

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

我如何将此数据提供给下面的反应组件？我不确定订阅在 React 方面如何工作。

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

【问题讨论】：

标签： reactjs rxjs behaviorsubject

【解决方案1】：

您可以在组件本身或其父级上执行此操作，并将值作为道具传递给它。

只需订阅 componentDidMount 事件上的 observable：

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

一个好的做法是使用 takeUntil 运算符和 Subject 来处理 componentWillUnmount 事件的取消订阅：

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
   ...
}

【讨论】：

在 componentDidMount 中订阅对我不起作用。状态变量未更新。
我不确定可能是什么问题。它在这里工作，但仅适用于从同一 http 服务器提供的两个文件。另一种解决方案是在父窗口上使用 postMessage，并在子窗口上监听 'message' 事件。
我将 postMessage 作为备份。当我将它放入组件构造器时，订阅和设置状态有效。感谢您的想法。