Leveraging NgRx effects with mergeMap

Question

Leveraging NgRx effects with mergeMap

I have developed two different approaches to achieve the same effect, and surprisingly both are functioning correctly. However, I am struggling to comprehend the nuances between them and determine which one is more "correct".

See them outlined below:

Option 1. The IDE is unable to infer the type for instance in the final map.

    pollingStarted$ = createEffect(() =>
        this.actions$.pipe(
            ofType(pollingStarted),
            mergeMap(action => action.instances),
            map(instance => performRequest({ instance }))
        )
    );

Option 2. All types are properly defined and clear. I personally consider this to be the more accurate approach, but I am eager to uncover and comprehend the distinctions.

   pollingStarted$ = createEffect(() =>
        this.actions$.pipe(
            ofType(pollingStarted),
            mergeMap(({ instances }) =>
                instances.map(instance => performRequest({ instance }))
            )
        )
    );

angular typescript rxjs ngrx mergemap

Answer 1

Answer №1

If you're looking for guidance on good and bad practices in Angular, check out this informative article.

Let's consider a scenario where you want to add another map within your second map.

   When working with nested maps, like in the example below, the code can quickly become unreadable and difficult to manage.

Handling errors can also become a challenge when dealing with multiple levels of maps.

Using the pipe operator is recommended for cleaner and more readable code, especially when dealing with nested operators like maps.

Refactoring code to simplify and improve manageability is crucial, as demonstrated by a recent experience in a large project.

Answer 2

If you're looking for guidance on good and bad practices in Angular, check out this informative article.

Let's consider a scenario where you want to add another map within your second map.

   When working with nested maps, like in the example below, the code can quickly become unreadable and difficult to manage.

Handling errors can also become a challenge when dealing with multiple levels of maps.

Using the pipe operator is recommended for cleaner and more readable code, especially when dealing with nested operators like maps.

Refactoring code to simplify and improve manageability is crucial, as demonstrated by a recent experience in a large project.

Answer 3

Answer №2

It appears that the initial method may not be effective:

pollingStarted$ = createEffect(() =>
    this.actions$.pipe(
        ofType(pollingStarted),
        mergeMap(action => action.instances),
        map(instance => performRequest({ instance }))
    )
);

mergeMap in this scenario flattens your array, and map produces an Observable for each value emitted. Consequently, you end up with an Observable of Observables (

Observable<Observable<your type>>

). To resolve this, you should employ one of the Higher Order Observables instead of map.

The alternative approach is the correct one:

pollingStarted$ = createEffect(() =>
    this.actions$.pipe(
        ofType(pollingStarted),
        mergeMap(({ instances }) =>
           instances.map(instance => performRequest({ instance }))
        )
     )
 );

In this case, mergeMap combines an array of observables generated by instances.map into a single observable. Using this method allows you to have control over the observables, enabling you to apply catchError to each performRequest individually or implement it at a higher level after mergeMap for a unified error handling mechanism for all performRequest calls.

Answer 4

It appears that the initial method may not be effective:

pollingStarted$ = createEffect(() =>
    this.actions$.pipe(
        ofType(pollingStarted),
        mergeMap(action => action.instances),
        map(instance => performRequest({ instance }))
    )
);

mergeMap in this scenario flattens your array, and map produces an Observable for each value emitted. Consequently, you end up with an Observable of Observables (

Observable<Observable<your type>>

). To resolve this, you should employ one of the Higher Order Observables instead of map.

The alternative approach is the correct one:

pollingStarted$ = createEffect(() =>
    this.actions$.pipe(
        ofType(pollingStarted),
        mergeMap(({ instances }) =>
           instances.map(instance => performRequest({ instance }))
        )
     )
 );

In this case, mergeMap combines an array of observables generated by instances.map into a single observable. Using this method allows you to have control over the observables, enabling you to apply catchError to each performRequest individually or implement it at a higher level after mergeMap for a unified error handling mechanism for all performRequest calls.

Leveraging NgRx effects with mergeMap

Answer №1

Answer №2

Similar questions

Issues arise when attempting to read data from a JSON file upon refreshing the Angular page

Angular 2 release candidate 3 encounters issues with unfulfilled dependencies

npm encountered an issue when attempting to install a package from a local directory: EISDIR: illegal operation on a directory, read

Understanding NestJS Mixins and Their Distinction from Inheritance

Refused to run script from inline content on the lightweight server due to security policy restrictions

Provide initial values to a custom TypeScript hook

When triggering the event: Was anticipating a spy, however received a Function instead

Struggling with the testing of @Output functionality through Jasmine

After compiling, global variables in Vue.js 2 + Typescript may lose their values

Setting values to variables within a component to enable universal access throughout the component in Angular 2

Issues with Angular 6 Feature Modules: Interceptor failing to execute

The CORS policy has blocked access to 'http://localhost:8080/BeginSignup' from 'http://localhost:4200'

What is the role of the handleSubmit parameter in React Hook Form?

Error code -8 occurred while executing the yarn dev command, unable to identify the issue

Show all the input validation errors in Angular 4

Having trouble compiling my Angular 13 application due to numerous node_module errors

Update the child component whenever there are changes in the variables of the parent component in Angular 2

History will still store CanActive URL even if it returns false

Utilizing Angular's ngIf directive to output the result of a condition

Is it possible to utilize the NX CLI for managing both Angular and React applications within the same Nx workspace?