replayShare alters the sequence

Question

replayShare alters the sequence

After creating an Observable from the array [1, 2, 3, 4, 5] and logging each iteration, the output is as expected: 1,2,3,4,5.

However, when adding shareReplay(2), only the last two iterations - 4,5 are displayed. This result is confusing as I was anticipating to see 1,2 as the output.

numbers$: Observable<number> = from([1, 2, 3, 4, 5, 6, 7]);

ngOnInit() {
this.numbers$.pipe(
  shareReplay(2),
  refCount()
).subscribe(data => console.log(data));

}

The issue can be seen on stackBlitz: https://stackblitz.com/edit/hello-angular-6-yb387t?file=src/app/app.component.ts

angular typescript rxjs

Answer 1

Answer №1

ShareReplay allows for replaying the last two emitted values from the observable. If you require the first two values instead, consider using take(2). For scenarios where both functionalities are necessary, shareReplay can still be utilized:

this.numbers$.pipe(
  take(2),
  shareReplay()
).subscribe(data => console.log(data));

It's important to note that when employing shareReplay, there is no need for refCount since it is already integrated within shareReplay. A comprehensive explanation on this topic can be found here.

Answer 2

ShareReplay allows for replaying the last two emitted values from the observable. If you require the first two values instead, consider using take(2). For scenarios where both functionalities are necessary, shareReplay can still be utilized:

this.numbers$.pipe(
  take(2),
  shareReplay()
).subscribe(data => console.log(data));

It's important to note that when employing shareReplay, there is no need for refCount since it is already integrated within shareReplay. A comprehensive explanation on this topic can be found here.

replayShare alters the sequence

Answer №1

Similar questions

Is there a way to restrict props.children.some to only accept image types?

Navigating the onSubmit with Formik in React: Tips and Tricks

Create a variable within a JavaScript function that retains its value each time the function is called

Enhancing User Interfaces with TypeScript Accordions

Error with tsc rootDir due to Docker's installation of yarn in root directory

Uncovering TypeScript's Type Inference Power Through the keyof Keyword

I am encountering difficulties using useContext alongside Typescript in my React project

Is it possible to receive upload progress events in HttpInterceptor but not through HttpClient calls?

Error: Failed to load chunk 552 due to chunk loading issue

.net 6 Attribute routes resulting in a 404 error response

Is there a way to prevent Ngrx Store from resetting when the browser is refreshed? Learn how to maintain the application's

Implementing Angular's Advanced Filtering Across Multiple Data Fields

Displaying data from an Angular subscription in a user interface form

Thread of Worker, different document from oneself, unable to locate module

How can the encapsulation parameter in Angular 2's component section be utilized effectively?

The mkdir function has encountered an invalid argument error with code EINVAL

Tips for displaying dynamic HTML content in Angular

Retrieving the Windows user's username via Typescript or Javascript is an essential

I am facing difficulty in retrieving data from Firestore using Angular

Nesting *ngFor in Angular allows for a powerful way