Progressive series of observable conditions

Question

Progressive series of observable conditions

The issue at hand:

I am faced with the task of checking multiple conditions, some of which lead to the same outcome.

Here is the current flow:

First, I check if a form is saved locally
If it is saved locally, I display text 1 to the user
If not saved locally, I then check if the server has this form in its database
If the server does have the form, I show text 2
If the server does not have the form, I show text 1

Is there a more efficient way to handle these conditions that ultimately lead to the same result?

Currently, the logic looks like this:

iif(
  () => this.savedLocally,
  this.showText1(),
  this.checkOnServer().pipe(
    switchMap(onServer => iif(
      () => onServer,
      this.showText2(),
      this.showText1()
    ))
  )
)

If another condition is added, it adds another level repeating this.showText1() somewhere.

I am seeking a redesign of this logic to minimize repetition.

The challenge lies in the fact that all three checks need to be performed in a specific order, and they are all asynchronous.

If it were a simple if, I could use

if (cond1 && cond2 && cond3)

, but the situation here is more complex. The checks must be sequential and each one depends on the result of the previous check.

angular typescript rxjs

Answer 1

Answer №1

Is it necessary to use observables in this scenario? It seems like you could achieve the same outcome using a simpler async function

async () => {
    if(this.savedLocally) return this.showText1();

    const isOnServer = await this.checkOnServer();
    if(isOnserver) return this.showText2();

    const isAnotherCondition = await this.checkAnotherCondition();
    if(isAnotherCondition ) return this.showText3();

    return this.showText1();
}

Answer 2

Is it necessary to use observables in this scenario? It seems like you could achieve the same outcome using a simpler async function

async () => {
    if(this.savedLocally) return this.showText1();

    const isOnServer = await this.checkOnServer();
    if(isOnserver) return this.showText2();

    const isAnotherCondition = await this.checkAnotherCondition();
    if(isAnotherCondition ) return this.showText3();

    return this.showText1();
}

Answer 3

Answer №2

Describing a scenario where each observable in a collection determines the utilization of the next observable.

If an observable's value does not meet a condition, the subsequent observable's value is used until the end of the collection. However, if an observable satisfies a condition, no further observables are needed.

Upon completion of the observable, accumulation of conditions is required.

The goal is scalability, enabling resolution of a series of conditions asynchronously while halting unnecessary logic.

This can be achieved by using a combination of a high-order observable, reducers, and a state object.

A high-order observable emits another observable, creating a nesting effect.

const higherOrder$ = of(of(true));

A state object holds the satisfy condition and accumulated values.

interface State {
   satisfy: boolean;
   values: {[key:string]: any};
}

A default state value is initialized.

const DEFAULT_STATE = {
   satisfy: false,
   values: {
      savedLocally: false,
      onServer: false
   }
};

Observables emitting values to be accumulated are defined.

Each observable emits satisfy and values.
As long as satisfy is false, the next observable is selected.
Values are accumulated in the final result.

const savedLocally$ = this.http.get(...).pipe(map(resp => ({
    satisfy: Boolean(resp), values: {savedLocally: resp}
})));

const checkOnServer$ = this.http.get(...).pipe(map(resp => ({
    satisfy: Boolean(resp), values: {onServer: resp}
})));

A high-order observable switches between observables, accumulates results, and stops at the first satisfied value.

The scan() operator is utilized to accumulate values for each emitted value.

of(savedLocally$, checkOnServer$).pipe(
   switchMap(ob$ => ob$),
   scan((acc, next) => ({
      satisfy: next.satisfy,
      values: {...acc.values, ...next.values}
   }), DEFAULT_STATE),
   filter(state => state.satisfy),
   first(),
   map(state => state.values)
).subscribe(values => console.log(values));

While this approach may not necessarily be simpler than your current method, it allows for scaling to handle a large collection of observables.

In this example, the switchMap() function does not access previous state values. Achieving this would involve a more complex process that requires additional consideration.

Answer 4

Describing a scenario where each observable in a collection determines the utilization of the next observable.

If an observable's value does not meet a condition, the subsequent observable's value is used until the end of the collection. However, if an observable satisfies a condition, no further observables are needed.

Upon completion of the observable, accumulation of conditions is required.

The goal is scalability, enabling resolution of a series of conditions asynchronously while halting unnecessary logic.

This can be achieved by using a combination of a high-order observable, reducers, and a state object.

A high-order observable emits another observable, creating a nesting effect.

const higherOrder$ = of(of(true));

A state object holds the satisfy condition and accumulated values.

interface State {
   satisfy: boolean;
   values: {[key:string]: any};
}

A default state value is initialized.

const DEFAULT_STATE = {
   satisfy: false,
   values: {
      savedLocally: false,
      onServer: false
   }
};

Observables emitting values to be accumulated are defined.

Each observable emits satisfy and values.
As long as satisfy is false, the next observable is selected.
Values are accumulated in the final result.

const savedLocally$ = this.http.get(...).pipe(map(resp => ({
    satisfy: Boolean(resp), values: {savedLocally: resp}
})));

const checkOnServer$ = this.http.get(...).pipe(map(resp => ({
    satisfy: Boolean(resp), values: {onServer: resp}
})));

A high-order observable switches between observables, accumulates results, and stops at the first satisfied value.

The scan() operator is utilized to accumulate values for each emitted value.

of(savedLocally$, checkOnServer$).pipe(
   switchMap(ob$ => ob$),
   scan((acc, next) => ({
      satisfy: next.satisfy,
      values: {...acc.values, ...next.values}
   }), DEFAULT_STATE),
   filter(state => state.satisfy),
   first(),
   map(state => state.values)
).subscribe(values => console.log(values));

While this approach may not necessarily be simpler than your current method, it allows for scaling to handle a large collection of observables.

In this example, the switchMap() function does not access previous state values. Achieving this would involve a more complex process that requires additional consideration.

Progressive series of observable conditions

Answer №1

Answer №2

Similar questions

Is it possible to modify the host header within an Angular app?

Utilizing FullCalendar to fetch information via HTTP

typescript tips for incorporating nested types in inheritance

Tips for displaying or concealing a div using Angular Js

Tips for importing a PDF file and storing it in your database

What is the procedure for renaming an item within a basic array in Angular?

Can classes be encapsulated within a NgModule in Angular 2/4?

Using Typescript to remove an element from an array inside another array

Using setState as a parameter in a personalized hook in React/Next.js while incorporating TypeScript

Issue with Angular2 Property Change Notification

After updating to Angular 7, an error was encountered: "TypeError: Unable to execute map function on ctorParameters"

Best approach for managing Union Types in Angular 16 Templates / Utilizing Type Inference?

Exploring the World of Micro-Frontends with the Angular Framework

What is the best way to connect a series of checkboxes within a form utilizing Angular?

Angular jsonp.get request was denied despite receiving a status code of 200 indicating success

Koffi organized a collection of structured arrays

The css values for component _nghost-c0 in an Angular application

The soft keyboard on Android devices may be obscured by an input field when using Cordova

NextJS Typescript Player

Sending data to child components in Ionic