Попытка вернуть наблюдаемый поток RxJS из экспортируемой функции

Question

У меня есть приложение React-Native, которое использует библиотеку реагировать-нативные датчики для доступа к данным акселерометра мобильного устройства (оси X, Y и Z). Библиотека реагировать на нативные датчики использует наблюдаемые RxJS, с чем я не знаком.

В более ранней версии приложения компонент App устанавливал свое собственное состояние для данных активного акселерометра устройства. Это произошло внутри функции конструктора компонента, где наблюдаемый акселерометр использовал оператор подписки для вызова 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() {
  ...
  ...
  ...
  }
}

Чтобы улучшить инкапсуляцию и выполнить более качественные тесты, я решил выделить наблюдаемый акселерометр в отдельный файл и экспортировать его обратно в компонент приложения. Мое намерение состояло в том, чтобы экспортировать наблюдаемое как функцию, которая будет возвращать поток значений, то есть тех, которые испускаются акселерометром. Вот где я застрял. Моя первая попытка экспортировать наблюдаемые данные выглядела так:

Accelerometer.js

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. Я также знаю, что есть другие операторы, такие как 'map', которые могут здесь помочь, но я не совсем уверен, как реализовать это в этом контексте.

Answer 1

Спасибо Фан Чунг. В конце концов я взял этот маршрут:

 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");
        };
    });
 }
}

Answer 2

Вы можете просто вернуть его как наблюдаемое и связать его с помощью setState, обернутого в 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()