Using RXJS with Typescript to wait for an observable to emit until another observable of type boolean evaluates to false

Question

Using RXJS with Typescript to wait for an observable to emit until another observable of type boolean evaluates to false

In my current setup, when a user navigates in a view, an API call is made to fetch the data for that specific view. This data is then used later on to decide whether a dialog should pop up when a user performs an action.

While the solution is functional at the moment, I foresee a potential issue if a user with high latency triggers the above action before the API request completes. I don't want to display a loading indicator every time a user navigates as it can be quite annoying to deal with. Instead, I prefer to have the user wait until they actually intend to perform the action.

Furthermore, I have an observable indicating whether the API request is currently loading or not, which I plan to utilize somehow.

actionPerformed$ = createEffect(() => 
      this.actions$.pipe(
        ofType(performAction),
        withLatestFrom(entities$),
        mergeMap(data => {
          let payload = data[0];
          let dataFromApi = data[1];
          ...
          ...
        })

One idea that came to mind, although it may not be efficient, was to have an operator that checks the condition and throws an error if it's still loading, then retrying after a short delay.

Do you have any better suggestions? I've explored using `delayWhen`, but it seems inefficient to introduce a delay like that. I'd prefer something more like a "gate" that only opens the stream when `loading$` is set to false and emits the value immediately once that condition is met.

Thank you in advance!

angular typescript rxjs ngrx

Answer 1

Answer №1

This demonstration illustrates how the dependent$ observable will produce a value once the source$ observable emits false. To view the functional code, visit: https://stackblitz.com/edit/rxjs-r3yma1?devtoolsheight=33&file=index.ts

import { of, timer } from "rxjs";
import { filter, map, switchMap, take, tap } from "rxjs/operators";

const array = [true, true, true, true, true, true, false];
const source$ = timer(0, 1000).pipe(
  map(index => array[index]),
  tap(console.log)
);

const dependent$ = of("the other person mentioned false");

source$
  .pipe(
    filter(value => value === false),
    switchMap(() => dependent$),
    take(1)
  )
  .subscribe(console.log);

Answer 2

This demonstration illustrates how the dependent$ observable will produce a value once the source$ observable emits false. To view the functional code, visit: https://stackblitz.com/edit/rxjs-r3yma1?devtoolsheight=33&file=index.ts

import { of, timer } from "rxjs";
import { filter, map, switchMap, take, tap } from "rxjs/operators";

const array = [true, true, true, true, true, true, false];
const source$ = timer(0, 1000).pipe(
  map(index => array[index]),
  tap(console.log)
);

const dependent$ = of("the other person mentioned false");

source$
  .pipe(
    filter(value => value === false),
    switchMap(() => dependent$),
    take(1)
  )
  .subscribe(console.log);

Answer 3

Answer №2

Here, the dependent observable will immediately emit since the service is not yet fetching data from the API. Once the service begins fetching data, the dependent observable will emit after the process is completed. To view the functioning code, visit https://stackblitz.com/edit/rxjs-3ecq5d?devtoolsheight=33&file=index.ts

import { BehaviorSubject, of } from "rxjs";
import { filter, switchMap, take } from "rxjs/operators";

class Service {
  loading$ = new BehaviorSubject<boolean>(false); // Initially set to false, indicating no ongoing data retrieval from the API

  fetchData() {
    console.log("Fetching data...");
    this.loading$.next(true);
    setTimeout(() => {
      console.log("Finished fetching data");
      this.loading$.next(false);
    }, 5000);
  }
}

class Component {
  service: Service;

  constructor(service: Service) {
    this.service = service;
  }

  emitWhenReady() {
    const dependent$ = of("I'll emit when not fetching data");
    this.service.loading$
      .pipe(
        filter(loading => loading === false),
        switchMap(() => dependent$),
        take(1)
      )
      .subscribe(console.log);
  }
}

const service = new Service();
const component = new Component(service);
component.emitWhenReady(); // The emission happens instantly as the service hasn't begun fetching data yet;
service.fetchData();
component.emitWhenReady(); // This will wait until the service finishes retrieving data.

Answer 4

Here, the dependent observable will immediately emit since the service is not yet fetching data from the API. Once the service begins fetching data, the dependent observable will emit after the process is completed. To view the functioning code, visit https://stackblitz.com/edit/rxjs-3ecq5d?devtoolsheight=33&file=index.ts

import { BehaviorSubject, of } from "rxjs";
import { filter, switchMap, take } from "rxjs/operators";

class Service {
  loading$ = new BehaviorSubject<boolean>(false); // Initially set to false, indicating no ongoing data retrieval from the API

  fetchData() {
    console.log("Fetching data...");
    this.loading$.next(true);
    setTimeout(() => {
      console.log("Finished fetching data");
      this.loading$.next(false);
    }, 5000);
  }
}

class Component {
  service: Service;

  constructor(service: Service) {
    this.service = service;
  }

  emitWhenReady() {
    const dependent$ = of("I'll emit when not fetching data");
    this.service.loading$
      .pipe(
        filter(loading => loading === false),
        switchMap(() => dependent$),
        take(1)
      )
      .subscribe(console.log);
  }
}

const service = new Service();
const component = new Component(service);
component.emitWhenReady(); // The emission happens instantly as the service hasn't begun fetching data yet;
service.fetchData();
component.emitWhenReady(); // This will wait until the service finishes retrieving data.

Answer 5

Answer №3

It seems like utilizing combineLatest instead of withLatestFrom could be beneficial in this scenario:

combineLatest([
  this.actions$.pipe(ofType(performAction)),
  entities$
]).pipe(
  filter(([action, entities]) => entities != null), // Check depends on entities structure
  map(([action, entities]) => {
    // Perform desired actions here
  })
);

This approach ensures that both observables have emitted before proceeding, signifying that "entities" are loaded. Additionally, the Filter step serves as a precautionary measure. Furthermore, it considers the last user action if any occurred prior to the completion of the entitites$ call.

Answer 6

It seems like utilizing combineLatest instead of withLatestFrom could be beneficial in this scenario:

combineLatest([
  this.actions$.pipe(ofType(performAction)),
  entities$
]).pipe(
  filter(([action, entities]) => entities != null), // Check depends on entities structure
  map(([action, entities]) => {
    // Perform desired actions here
  })
);

This approach ensures that both observables have emitted before proceeding, signifying that "entities" are loaded. Additionally, the Filter step serves as a precautionary measure. Furthermore, it considers the last user action if any occurred prior to the completion of the entitites$ call.

Using RXJS with Typescript to wait for an observable to emit until another observable of type boolean evaluates to false

Answer №1

Answer №2

Answer №3

Similar questions

Steps for setting up a Node.js Express application that serves a Vue.js single page application

Facilitating the integration of both Typescript and JavaScript within a Node application

Router failure resulted in an internal server error

displaying post data in the URL address bar

Using Ionic to send email verification via Firebase

The specified main access point, "@angular/cdk/platform", is lacking in required dependencies

Check for the data attributes of MenuItem in the TextField's onChange event listener

Middleware in Redux Toolkit is ineffective in managing successful asynchronous actions

@The value of @Input is consistently undefined

Angular2: The NgFor directive is designed to work with Iterables like Arrays for data binding

Struggling to destructure props when using getStaticProps in NextJS?

The value of type 'number' cannot be assigned to type 'string | undefined'

Every time I try to run my Angular app, it crashes. I've already tried reinstalling Node and rebooting

The Angular Node server is responding with the error message "You have entered 'undefined' instead of a stream."

The error at events.js:154 was not properly handled and caused an 'error' event to be thrown

Combining Vue with Typescript and rollup for a powerful development stack

If the input is unmounted in react-hook-form, the values from the first form may disappear

Issues with Angular routing in Fuse administrator and user interfaces

How to manually set the value of a select object in Angular 5

How to send multiple queries in one request with graphql-request while using getStaticProps?