Why does my RxJS code not take effect when operating on streams?

Frequently Asked Questions and Solutions for Invalid RxJS Streaming Operation

When using RxJS to process data flows, developers often encounter situations where operators cannot work as expected. This article will analyze a typical case, explain the root cause of the problem and provide solutions.

Problem: The operation of even multiplying by two fails

Suppose we need to process an array of numbers, filter out even numbers and multiply them by 2. The code using of operator, filter and map operator is as follows:

 import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const source$ = of([1, 2, 3, 4, 5]);
source$.pipe(
  filter(item => item % 2 === 0),
  map(num => num * 2)
).subscribe(value => console.log(value));

The expected outputs are 4 and 8 , but the actual result does not have any output.

Cause analysis

The problem lies in the usage of the of operator. of operator emits the input parameters as a whole, rather than transmitting each element in the array separately. Therefore, item received by filter and map operators is the entire array [1, 2, 3, 4, 5] , rather than a single number in the array. The judgment of item % 2 === 0 is invalid for the entire array, causing filter to filter out all content.

Solution: Use the from operator

To solve this problem, from operator should be used instead of the of operator. from operator splits the array into individual elements and emits it into the Observable one by one. The modified code is as follows:

 import { from } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const source$ = from([1, 2, 3, 4, 5]);
source$.pipe(
  filter(item => item % 2 === 0),
  map(num => num * 2)
).subscribe(value => console.log(value));

Now filter and map operators will handle each number correctly, with the final outputs 4 and 8 . This demonstrates the importance of choosing the correct RxJS operator for correct processing of data flows.

The above is the detailed content of Why does my RxJS code not take effect when operating on streams?. For more information, please follow other related articles on the PHP Chinese website!