What is the alternative to the deprecated 'combineLatest' method in rxJs and how can it be replaced?

Question

What is the alternative to the deprecated 'combineLatest' method in rxJs and how can it be replaced?

Recently, I came across a situation where I had implemented a method using the combinlatest rsjx/operator. It was working perfectly fine. However, Sonar flagged it as deprecated and now I need to update it to the latest version. When I tried to simply replace the import, I encountered an error. I'm looking for some expert guidance on how to properly convert it to the latest version.

gX$ = createEffect(() => this.actions$.pipe(
    ofType(ActionType.A),
    combineLatest(this.service.getoc()),
    mergeMap(([, oc]) => this.reviewService.findBy(oc.id,
      new Date(),
      new Date(new Date().setDate(new Date().getDate() + 1)))
      .pipe(
        mergeMap(d => {
          return of(reviewLoadSuccess({ reviews: getReviews(d) }));
        }
        ),
        catchError(error => {
          return of(reviewLoadFailure({ error: error }));
        })
      )
    )));

typescript rxjs rxjs6 ngrx-effects combinelatest

Answer 1

Answer №1

To correctly implement this functionality, make sure to import from rxjs instead of rxjs/oeprators. Here's how you can use it:

import { combineLatest } from 'rxjs';

combineLatest([
  this.actions$.pipe(ofType(ActionType.A)),
  this.service.getoc()
]).pipe(mergeMap(...));

Answer 2

To correctly implement this functionality, make sure to import from rxjs instead of rxjs/oeprators. Here's how you can use it:

import { combineLatest } from 'rxjs';

combineLatest([
  this.actions$.pipe(ofType(ActionType.A)),
  this.service.getoc()
]).pipe(mergeMap(...));

Answer 3

Answer №2

If you only need the value returned by this.service.getoc(), consider using the switchMapTo operator instead, as shown in the example below:

 gX$ = createEffect(() => this.actions$.pipe(
   ofType(ActionType.A),
   switchMapTo(this.service.getoc()),
   mergeMap(oc => this.reviewService.findBy(oc.id,
     new Date(),
     new Date(new Date().setDate(new Date().getDate() + 1)))
     .pipe(
       mergeMap(d => {
         return of(reviewLoadSuccess({ reviews: getReviews(d) }));
       }
       ),
       catchError(error => {
         return of(reviewLoadFailure({ error: error }));
       })
     )
   )));

In case you also want to use the action, you can make the following changes:

gX$ = createEffect(() => this.actions$
  .pipe(
    ofType(ActionType.A),
    switchMap(action => this.service.getoc().pipe(
      switchMap(oc => {
        //  You now have access to both the action and oc
        // ... continue with your code here
      })
    ))
  )
)

Answer 4

If you only need the value returned by this.service.getoc(), consider using the switchMapTo operator instead, as shown in the example below:

 gX$ = createEffect(() => this.actions$.pipe(
   ofType(ActionType.A),
   switchMapTo(this.service.getoc()),
   mergeMap(oc => this.reviewService.findBy(oc.id,
     new Date(),
     new Date(new Date().setDate(new Date().getDate() + 1)))
     .pipe(
       mergeMap(d => {
         return of(reviewLoadSuccess({ reviews: getReviews(d) }));
       }
       ),
       catchError(error => {
         return of(reviewLoadFailure({ error: error }));
       })
     )
   )));

In case you also want to use the action, you can make the following changes:

gX$ = createEffect(() => this.actions$
  .pipe(
    ofType(ActionType.A),
    switchMap(action => this.service.getoc().pipe(
      switchMap(oc => {
        //  You now have access to both the action and oc
        // ... continue with your code here
      })
    ))
  )
)

What is the alternative to the deprecated 'combineLatest' method in rxJs and how can it be replaced?

Answer №1

Answer №2

Similar questions

Timeout with Promise

Angular seed appears to experience a hiccup when the "Loading..." screen persists after the incorporation of a router-outlet

Error: The function was expecting a mapDiv with the type of Element, but instead undefined was passed - google

Assign the primeng dropdown's value to the model in a reactive form

Error in Typescript: Using forEach method - 'string' type cannot be assigned to 'never' type

Having trouble displaying the button upon initial load using ngIf

Steer clear of chaining multiple subscriptions in RXJS to improve code

What is the best way to verify that all elements within an object are 'false' except for one that is 'true'?

Is there an alternative method to incorporate the 'environment.ts' file into a JSON file?

Dispatch a websocket communication from a synchronous function and retrieve the information within the function itself

Exploring the depths of Typescript: Navigating through intricate mapping of keys and types in dynamic

Using selectors and mappers in Typescript generics

Barreling is essential for TypeScript custom paths to function properly

How can you display or list the props of a React component alongside its documentation on the same page using TypeDoc?

What causes the variation in typing behavior between specifying props directly on a component versus nesting them inside another prop?

What is the correct way to utilize a variable as a parameter in React Query while employing the axios.request(options) method?

What is the proper syntax for using .focus() with the nextElementSibling method in typing?

Typescript Error: Trying to access a property that is undefined

In Typescript, it mandates that a string value must be one of the values within the object

Learn how to utilize ng2-file-upload in Angular for uploading .ply files effortlessly!