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

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

0 голосов
/ 28 февраля 2019

У меня есть приложение React-Native, в котором для доступа к данным акселерометра мобильного устройства (оси 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() {
  ...
  ...
  ...
  }
}

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

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

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

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

 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");
        };
    });
 }
}
0 голосов
/ 28 февраля 2019

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