Leveraging the power of RXJS and typescript for executing work conditionally between Server and Client Code

Question

Leveraging the power of RXJS and typescript for executing work conditionally between Server and Client Code

I am in need of a function that will assess various conditions to determine if an object is eligible for editing.
These conditions may exist on both the server and client sides.
Certain conditions should halt further validation and return a value.

I will attempt to clarify this process using pseudocode.
There may be an established pattern for executing such tasks already.

isEditable(): Observable<boolean> {
  return serverSideCondition.pipe(
    switchMap(editable => {
      if (editable)
      {
        return clientSideCondition;
      }

      return of(false); // Should abort further conditions ...
    }),
    switchMap(editable => {
      if (editable)
      {
        return clientSideAskTheUser;
      }

      return of(false); // Should abort further conditions ...
    })
  );
}

Thanks

angular typescript design-patterns rxjs conditional-statements

Answer 1

Answer №1

If you prefer not to pass a false value through all operators, an alternative approach is to throw an error and catch it later.

isEditable(): Observable<boolean> {
  return serverSideCondition.pipe(
    throwIfFalsy(),
    switchMap(editable => clientSideCondition.pipe(throwIfFalsy())),   
    switchMap(editable => clientSideAskTheUser.pipe(throwIfFalsy())),
    // other operators ...
    catchError(error => of(error))
  );
}

throwIfFalsy() {
  return tap(value => {
    if (!value) {
      throw value
    }
  })
}

Answer 2

If you prefer not to pass a false value through all operators, an alternative approach is to throw an error and catch it later.

isEditable(): Observable<boolean> {
  return serverSideCondition.pipe(
    throwIfFalsy(),
    switchMap(editable => clientSideCondition.pipe(throwIfFalsy())),   
    switchMap(editable => clientSideAskTheUser.pipe(throwIfFalsy())),
    // other operators ...
    catchError(error => of(error))
  );
}

throwIfFalsy() {
  return tap(value => {
    if (!value) {
      throw value
    }
  })
}

Leveraging the power of RXJS and typescript for executing work conditionally between Server and Client Code

Answer №1

Similar questions

Tips for customizing the appearance of ng-bootstrap accordion

Errors occur when attempting to parse Uint8Array in Typescript

What is the code to continuously click on the "Next" button in playwright (typescript) until it is no longer visible?

Utilizing props in styled-components: A beginner's guide

Angular 8 Issue: Absence of _body and Headers in Response

What is the method for retrieving array values from an attribute?

Having trouble closing my toggle and experiencing issues with the transition not functioning properly

Incorporating an additional ion-item alongside the existing one instead of substituting it

What is the best way to scroll a specific element within a div container?

How to utilize *ngFor alongside the async pipe for conditional rendering in Angular 8 HTML

Transmitting data from Angular to .NET Core for seamless integration

Angular 4 file upload verification: Ensuring safe and secure uploads

Ways to retrieve form information from a POST request

The payload from the Axios POST request is failing to reach its destination endpoint

Converting a string value into an object in Javascript using a command that functions similarly to eval in Python

Angular library modules for node packages

What is the best way to implement function chaining in TypeScript?

Is it feasible to evaluate a Typescript method parameter decorator at request time in a nodejs+nestjs environment rather than just at build time?

Update Observable by assigning it a new value of transformed information using the async pipe and RXJS

Getting the current browser window in the renderer within Electron 14: A step-by-step guide