Trouble arises with tap operator's output in RxJS

Question

Trouble arises with tap operator's output in RxJS

I'm puzzled by the results of the code below. According to the take(3) function, processing should stop after rendering 10, but I'm still seeing 5, 6, and 9 from the tap operator. Please see the output and code snippet below for reference.

Tapped value null
Tapped value 20
Rendering Item 20
Tapped value 15
Rendering Item 15
Tapped value 10
Rendering Item 10
Completed
Tapped value 5
Tapped value 6
Tapped value 9

of(null, 20, 15, 10, 5, 6, 9)
      .pipe(
        tap(val => console.log(`Tapped value ${val}`)),
        filterNil(),
        take(3)
      )
      .subscribe(
        item => console.log(`Rendering Item ${item}`),
        err => console.log(err),
        () => console.log('Completed')
      );
  }

const filterNil = () => (source: Observable<any>) =>
  new Observable(observer => {
    return source.subscribe({
      next(value) {
        if (value !== undefined && value !== null) {
          observer.next(value);
        }
      },
      error(error) {
        observer.error(error);
      },
      complete() {
        observer.complete();
      }
    });
  });

typescript rxjs

Answer 1

Answer №1

The conclusive response to this inquiry

You can find the accurate solution to this query in the provided link.

Initial answer - a straightforward explanation

The outcome you observe stems from the synchronous nature of your code, where the implicit unsubscribe after 3 emissions due to take(3) does not execute.

Consider this revised snippet

of(null, 20, 15, 10, 5, 6, 9)
      .pipe(
        delay(0),  // >>> introduce a delay
        tap(val => console.log(`Tapped value ${val}`)),
        filterNil(),
        take(3)
  )

Introducing a delay allows take to trigger an unsubscribe, resulting in the expected behavior.

A delve into detailed reasoning

Further investigation reveal nuances that challenge my previous explanation's simplicity.

Notably, filterNil() should function akin to filter(item => item !== null), a standard operator from rxjs/operators.

Substituting filter(item => item !== null) with filterNil() leads to contrasting outcomes

of(null, 20, 15, 10, 5, 6, 9)
      .pipe(
        tap(val => console.log(`Tapped value ${val}`)),
        filter(item => item !== null),
        take(3)
      )

      .subscribe(
        item => console.log(`Rendering Item ${item}`),
        err => console.log(err),
        () => console.log('Completed')
      );
  }

// console output:

Tapped value null
Tapped value 20
Rendering Item 20
Tapped value 15
Rendering Item 15
Tapped value 10
Rendering Item 10
Completed

These results indicate non-equivalence between filter(item => item !== null) and filterNil().

This discrepancy seems tied to the inner workings of Observable's subscribe method, influenced by the unique natures of filterNil and filter.

An illustration depicting the execution trace under filterNil:

https://i.sstatic.net/p2mgD.png

In contrast, the trace under filter is as shown here: https://i.sstatic.net/NAtTA.png

The differing attributes set within operator - null for filterNil and FilterOperator for filter - appear to dictate these variations. Understanding these intricacies warrants further exploration in a separate context.

Answer 2

The conclusive response to this inquiry

You can find the accurate solution to this query in the provided link.

Initial answer - a straightforward explanation

The outcome you observe stems from the synchronous nature of your code, where the implicit unsubscribe after 3 emissions due to take(3) does not execute.

Consider this revised snippet

of(null, 20, 15, 10, 5, 6, 9)
      .pipe(
        delay(0),  // >>> introduce a delay
        tap(val => console.log(`Tapped value ${val}`)),
        filterNil(),
        take(3)
  )

Introducing a delay allows take to trigger an unsubscribe, resulting in the expected behavior.

A delve into detailed reasoning

Further investigation reveal nuances that challenge my previous explanation's simplicity.

Notably, filterNil() should function akin to filter(item => item !== null), a standard operator from rxjs/operators.

Substituting filter(item => item !== null) with filterNil() leads to contrasting outcomes

of(null, 20, 15, 10, 5, 6, 9)
      .pipe(
        tap(val => console.log(`Tapped value ${val}`)),
        filter(item => item !== null),
        take(3)
      )

      .subscribe(
        item => console.log(`Rendering Item ${item}`),
        err => console.log(err),
        () => console.log('Completed')
      );
  }

// console output:

Tapped value null
Tapped value 20
Rendering Item 20
Tapped value 15
Rendering Item 15
Tapped value 10
Rendering Item 10
Completed

These results indicate non-equivalence between filter(item => item !== null) and filterNil().

This discrepancy seems tied to the inner workings of Observable's subscribe method, influenced by the unique natures of filterNil and filter.

An illustration depicting the execution trace under filterNil:

https://i.sstatic.net/p2mgD.png

In contrast, the trace under filter is as shown here: https://i.sstatic.net/NAtTA.png

The differing attributes set within operator - null for filterNil and FilterOperator for filter - appear to dictate these variations. Understanding these intricacies warrants further exploration in a separate context.

Answer 3

Answer №2

It seems like your filterNil function is still running because it's a separate observable unaffected by the take operator. Remember, RxJS operators are executed in order. To fix this, consider moving the take to the beginning of the pipe chain or avoid creating a new observable inside your filter function.

// The position of operators matters
.pipe(
  take(3),
  tap(val => console.log(`Tapped value ${val}`)),
  filterNil()
)

// Alternatively, refactor the filterNil operator

const filterNilRefactor = () => {
  return source => source.pipe(filter((value) => value !== undefined && value !== null))
}

.pipe(
  tap(val => console.log(`Tapped value ${val}`)),
  filterNilRefactor(),
  take(3)
)

Answer 4

It seems like your filterNil function is still running because it's a separate observable unaffected by the take operator. Remember, RxJS operators are executed in order. To fix this, consider moving the take to the beginning of the pipe chain or avoid creating a new observable inside your filter function.

// The position of operators matters
.pipe(
  take(3),
  tap(val => console.log(`Tapped value ${val}`)),
  filterNil()
)

// Alternatively, refactor the filterNil operator

const filterNilRefactor = () => {
  return source => source.pipe(filter((value) => value !== undefined && value !== null))
}

.pipe(
  tap(val => console.log(`Tapped value ${val}`)),
  filterNilRefactor(),
  take(3)
)

Trouble arises with tap operator's output in RxJS

Answer №1

Answer №2

Similar questions

When attempting to specify the path in the angular.json file, Angular encounters difficulty accessing Bootstrap from the node_modules directory

Transferring an array of interfaces between Angular 2 components

Error: The Router.use() function expects a middleware function, but it received an undefined value with two middlewares involved

Checking the parameters passed to a function in Typescript: A step-by-step guide

Getting TypeScript errors when incorporating a variant into a Material-UI button using a custom component

Using ES6 proxy to intercept ES6 getter functions

Deliberately choosing not to fulfill the Bluebird Promise

How to transfer an object between sibling components in Angular 4

Using navigateByUrl() to pass a query parameter

Encountering an uncaughtException: Error stating that the module '....nextserverapphomelibworker.js' cannot be located while attempting to utilize pino.transport in Next.js

Drizzle-ORM provides the count of items in a findMany query result

Checking conditions sequentially in Angular

Is there a more efficient method for casting the output of Object.keys() in Typescript?

What is the proper way to define a generic object interface in Typescript?

Develop a tailored filter by utilizing the FilterPredicate to refine the DataSource

Encountered an issue while attempting to integrate Nebular into my Angular application

What is the best way to retrieve the initial element in an array?

Issue with LokiJS: The DynamicView().branchResultSet method does not apply sorting to the collection

Creating a TypeScript generic that can traverse the routes configuration tree while accumulating the path is a useful skill to have

What is the process of importing an IIFE-based JavaScript module into an Angular TypeScript application?