试图从导出功能返回可观察到的RXJS可观察流



i具有一个反应的应用程序,该应用使用库反应传感器访问移动设备的加速度计数据(x,y和z轴)。反应生态传感器库利用RXJS可观察物,这是我不熟悉的。

在该应用程序的较早版本中,应用程序组件将将自己的状态设置为设备的实时加速度计数据。这发生在组件的构造函数中,在该功能中,加速度计可观察到的订阅操作员调用" setState"。这种方法具有所需的效果,即应用程序的状态继续定期更新设备。

在此阶段,应用程序组件看起来像这样:

import React, { Component } from "react"; 
import { setUpdateIntervalForType, SensorTypes, accelerometer } from "react-native-sensors";
export default class App extends Component {   
  constructor(props) {
    super(props);
    setUpdateIntervalForType(SensorTypes.accelerometer, 150);
    accelerometer.subscribe(({ x, y, z }) => {
      this.setState({ x, y, z }),
        error => {
          console.log("The sensor is not available");
        };
    });
    this.state = { x: 0, y: 0, z: 0 };   
  }
  render() {
  ...
  ...
  ...
  }
}

为了改善封装并执行更好的测试,我决定将可观察到的加速度计提取到单独的文件中并将其导出到应用程序组件中。我的目的是导出可观察到的作为将返回值流的函数,即从加速度计发出的函数。这就是我被卡住的地方。我的第一次导出可观察数据的尝试看起来像:

加速度计

import {
  setUpdateIntervalForType,
  SensorTypes,
  accelerometer
} from "react-native-sensors";
export default function AccelerometerData() {
   var data;
   setUpdateIntervalForType(SensorTypes.accelerometer, 150);
   accelerometer.subscribe(({ x, y, z }) => {
      data = { x, y, z }
   });
  return data;
 }

我感谢这种方法不尊重RXJS可观察的异步性质。我也知道,还有其他操作员在这里可能会有所帮助,但是我不确定如何在这种情况下实施它。

您只需将其作为可观察的,并用包裹在obervable中的固定状态将其链接起来

export default function AccelerometerData() {
   var data;
   setUpdateIntervalForType(SensorTypes.accelerometer, 150);
   return accelerometer
 }

用法

setState(obj)=>
new Observable(obs=>this.setState(obj,()=>obs.next(this.state))
AccelerometerData().pipe(tap(obj=>setState(obj)).subscribe()

感谢范·张。我最终走了这条路线:

 export async function accelerometerData() {
      setUpdateIntervalForType(SensorTypes.accelerometer, 150);
      return accelerometer;
    }

用法:

async getAccelerometerData() {
    const accelerometer = await accelerometerData();
    accelerometer.subscribe(({ x, y, z }) => {
      this.setState({ x, y, z }),
        error => {
          console.log("The sensor is not available");
        };
    });
 }
}

最新更新