Stop the observable based on the data rather than the cause

Question

Stop the observable based on the data rather than the cause

In my service, I am making http requests to a backend that is beyond my control in order to retrieve marketing page content. There are instances when I need to load multiple pieces of marketing content simultaneously. I have implemented an effect that calls this service.

@Effect()
marketingContent$ = this.actions$
  .ofType(LOAD_MARKETING_CONTENT)
  .switchMap(({ payload }) => this.marketingService.getContent(payload)
    .map(content => Action.LoadMarketingContentComplete(content))
  )

Everything was running smoothly until I realized that if I trigger the loading of more than one piece of marketing content at the same time, the .switchMap cancels the previous request.

store.dispatch(Action.LoadMarketingContent('A'));
store.dispatch(Action.LoadMarketingContent('B'));
// Only 'B' gets loaded as 'A' is canceled before completion

I tried using .mergeMap instead of .switchMap, but then duplicate requests were not being canceled.

Another approach could be creating separate actions for each piece of marketing content, but that would involve setting up new actions and effects for each piece.

Is there a way to modify .switchMap so that it only cancels requests for the same content (when the payload matches), or perhaps another method to execute simultaneous requests for different content while canceling duplicates within the same stream?

angular typescript rxjs observable ngrx

Answer 1

Answer №1

If you implement the action CANCEL_MARKETING_CONTENT, you can use mergeMap in this manner:

@Effect()
marketingContent$ = this.actions$
  .ofType(LOAD_MARKETING_CONTENT)
  .mergeMap(({ payload }) => this.marketingService
    .getContent(payload)
    .map(content => Action.LoadMarketingContentComplete(content))
    .takeUntil(this.actions$.ofType(CANCEL_MARKETING_CONTENT))
  );

This approach allows you to load multiple pieces of marketing content, with the ability to cancel any pending loads by dispatching a CANCEL_MARKETING_CONTENT action before dispatching the LOAD_MARKETING_CONTENT action(s).

For instance, to load piece A only, the process would be:

store.dispatch(Action.CancelMarketingContent());
store.dispatch(Action.LoadMarketingContent('A'));

And for loading both pieces A and B:

store.dispatch(Action.CancelMarketingContent());
store.dispatch(Action.LoadMarketingContent('A'));
store.dispatch(Action.LoadMarketingContent('B'));

Alternatively, there is a cleaner method that avoids introducing another action.

You can utilize the same action with the same payload as the cancellation trigger. For example:

@Effect()
marketingContent$ = this.actions$
  .ofType(LOAD_MARKETING_CONTENT)
  .mergeMap(({ payload }) => this.marketingService
    .getContent(payload)
    .map(content => Action.LoadMarketingContentComplete(content))
    .takeUntil(this.actions$
      .ofType(LOAD_MARKETING_CONTENT)
      .skip(1)
      .filter(({ payload: next }) => next === payload)
    )
  );

In this scenario, skip is used to ignore the currently processed action within the effect. It's important to note that the assumption here is that the payload is either "A" or "B", etc.

Answer 2

If you implement the action CANCEL_MARKETING_CONTENT, you can use mergeMap in this manner:

@Effect()
marketingContent$ = this.actions$
  .ofType(LOAD_MARKETING_CONTENT)
  .mergeMap(({ payload }) => this.marketingService
    .getContent(payload)
    .map(content => Action.LoadMarketingContentComplete(content))
    .takeUntil(this.actions$.ofType(CANCEL_MARKETING_CONTENT))
  );

This approach allows you to load multiple pieces of marketing content, with the ability to cancel any pending loads by dispatching a CANCEL_MARKETING_CONTENT action before dispatching the LOAD_MARKETING_CONTENT action(s).

For instance, to load piece A only, the process would be:

store.dispatch(Action.CancelMarketingContent());
store.dispatch(Action.LoadMarketingContent('A'));

And for loading both pieces A and B:

store.dispatch(Action.CancelMarketingContent());
store.dispatch(Action.LoadMarketingContent('A'));
store.dispatch(Action.LoadMarketingContent('B'));

Alternatively, there is a cleaner method that avoids introducing another action.

You can utilize the same action with the same payload as the cancellation trigger. For example:

@Effect()
marketingContent$ = this.actions$
  .ofType(LOAD_MARKETING_CONTENT)
  .mergeMap(({ payload }) => this.marketingService
    .getContent(payload)
    .map(content => Action.LoadMarketingContentComplete(content))
    .takeUntil(this.actions$
      .ofType(LOAD_MARKETING_CONTENT)
      .skip(1)
      .filter(({ payload: next }) => next === payload)
    )
  );

In this scenario, skip is used to ignore the currently processed action within the effect. It's important to note that the assumption here is that the payload is either "A" or "B", etc.

Answer 3

Answer №2

Instead of directly canceling the effect, you have the option to modify the effect to fetch marketing content in batches while still utilizing switchMap for terminating subsequent requests.

@Effect()
marketingContent$ = this.actions$
  .ofType(LOAD_MARKETING_CONTENT)
  .switchMap(({ payload }) => forkJoin(
    payload.map(name => this.marketingService.getContent(payload))
  ).map(content => Action.LoadMarketingContentComplete(content))

In this scenario, the payload consists of an array of content names for retrieval instead of a single name, enabling you to load content in groups.

Answer 4

Instead of directly canceling the effect, you have the option to modify the effect to fetch marketing content in batches while still utilizing switchMap for terminating subsequent requests.

@Effect()
marketingContent$ = this.actions$
  .ofType(LOAD_MARKETING_CONTENT)
  .switchMap(({ payload }) => forkJoin(
    payload.map(name => this.marketingService.getContent(payload))
  ).map(content => Action.LoadMarketingContentComplete(content))

In this scenario, the payload consists of an array of content names for retrieval instead of a single name, enabling you to load content in groups.

Stop the observable based on the data rather than the cause

Answer №1

Answer №2

Similar questions

Retrieving an array of objects from a JSON file using Angular 2

Issue with Angular Reactive form: Checkbox checked property not binding correctly when the page initially loads

Adding an object dynamically to a JSON array: Step-by-step guide

The process of extracting all arrays from a JSON object

"Learn how to trigger an event from a component loop up to the main parent in Angular 5

Exploring Angular 2's nested navigation using the latest router technology

Develop a flexible axios client

Having trouble retrieving features from a QR code generated with Angularx-qrcode?

No TypeScript error in Angular app when assigning a string to a number data type

Translating Bootstrap 5 into Angular components for version 13 and above

Ionic 4: Facing issues with setting complete background image on ion-card

Generate a fresh class instance in Typescript by using an existing class instance as the base

Converting European date format to a standard format

Ways to ascertain if a TypeScript type is a specific value

Guide on incorporating a YouTube iframe in React with Typescript

Creating versatile list components that can accommodate various types of list items

Developing web applications with Angular 6, C#, and MVC involves dynamically generating and returning JsonResults from the controller in the form of

Exploring the benefits of leveraging TypeScript with AWS NodeJS for improved stacktrace visibility over traditional JavaScript

Oh no! It seems like the build script is missing in the NPM

What is the best way to showcase a file edited in Emacs within Atom?