React Native中用RxJS fromEventPattern过滤BLE事件遇报错问题

It sounds like the issue comes from how you're defining the addHandler and removeHandler functions for fromEventPattern. The error "addHandler is not a function" usually means the first argument passed to fromEventPattern isn't a valid function that registers your listener correctly.

Here's a step-by-step solution to get RxJS filtering working with your BLE events:

Root Cause #

fromEventPattern expects two functions:

1. An add function that takes a single handler argument and registers it with your event emitter.
2. A remove function that takes the same handler and unregisters it.

If you tried passing BleManager.addListener directly, that won't work because addListener requires two arguments (event name and handler), not just the handler. You need to wrap it in a function that supplies the event name for you.

Correct Implementation #

1. Import Required Modules #

First, make sure you have RxJS operators installed, then import them along with BleManager:

import { fromEventPattern } from 'rxjs';
import { filter } from 'rxjs/operators';
import BleManager from 'react-native-ble-manager';

2. Set Up the Observable in componentDidMount #

Create your observable using fromEventPattern, then apply your filtering logic with RxJS operators:

class YourBleComponent extends React.Component {
  // Store the subscription to unsubscribe later
  bleSubscription = null;

  componentDidMount() {
    // Create an observable from the BLE value update event
    const valueUpdate$ = fromEventPattern(
      // Add handler: register the listener with the correct event name
      (handler) => BleManager.addListener('BleManagerDidUpdateValueForCharacteristic', handler),
      // Remove handler: unregister the listener when done
      (handler) => BleManager.removeListener('BleManagerDidUpdateValueForCharacteristic', handler)
    );

    // Apply your filtering logic (e.g., keep 1 out of every 4 events)
    this.bleSubscription = valueUpdate$
      .pipe(
        // Customize this filter to match your criteria
        filter((_, eventIndex) => eventIndex % 4 === 0)
      )
      .subscribe((event) => {
        // This is your original handleUpdateValueForCharacteristic logic
        const { characteristic, value } = event;
        console.log('Filtered BLE data:', value);
        // Process the value as needed here
      });
  }

  componentWillUnmount() {
    // Always unsubscribe to prevent memory leaks
    if (this.bleSubscription) {
      this.bleSubscription.unsubscribe();
    }
  }

  // ... rest of your component code (BLE connection, etc.)
}

Key Notes #

• Filter Logic: Adjust the filter operator to match your actual needs. For example, if you need to filter based on the event data itself (not just index), use something like filter(event => event.value.someCondition).
• Unsubscribing: Never forget to unsubscribe in componentWillUnmount to avoid memory leaks in your React Native app.
• Event Data: The event object in the subscribe callback is identical to what you'd receive in your original handleUpdateValueForCharacteristic function, so you can access all the same properties (like characteristic and value).

This should resolve the "addHandler is not a function" error and let you efficiently filter your BLE events with RxJS.

内容的提问来源于stack exchange，提问作者anon