Splitting Ngrx actions for individual items into multiple actions

Question

Splitting Ngrx actions for individual items into multiple actions

I'm currently attempting to create an Ngrx effect that can retrieve posts from several users instead of just one. I have successfully implemented an effect that loads posts from a single user, and now I want to split the LoadUsersPosts effect into individual LoadUserPosts effects for each user. How can I achieve this?

This is my current approach:

@Effect() loadUsersPosts$ = this.actions$
.ofType(LOAD_USERS_POSTS)
.mergeMap((action: LoadUsersPosts) => {
  const array = [];
  action.payload.forEach(user => {
    array.push(new LoadPosts(user));
  });
  return array;
});

Despite inserting console.log's within the forEach loop, it appears that the code isn't being executed at all.

angular typescript ngrx ngrx-effects

Answer 1

Answer №1

It seems like the main goal you have is to transform and emit each value individually from an array in an observable stream. Instead of using a forEach loop, you can achieve this more efficiently by utilizing the map operator. By creating an observable from the transformed array with the help of the from operator, each value will be emitted sequentially. Here's a concise example:

Rx.Observable.of([1,2,3,4,5])
  .mergeMap(x => {
    const transformed = x.map(y => y * 2);
    return Rx.Observable.from(transformed);
  })
  .subscribe(x => { console.log(x); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.10/Rx.min.js"></script>

Answer 2

It seems like the main goal you have is to transform and emit each value individually from an array in an observable stream. Instead of using a forEach loop, you can achieve this more efficiently by utilizing the map operator. By creating an observable from the transformed array with the help of the from operator, each value will be emitted sequentially. Here's a concise example:

Rx.Observable.of([1,2,3,4,5])
  .mergeMap(x => {
    const transformed = x.map(y => y * 2);
    return Rx.Observable.from(transformed);
  })
  .subscribe(x => { console.log(x); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.10/Rx.min.js"></script>

Answer 3

Answer №2

To achieve this functionality, you can use the following code snippet:

@Effect()
  loadUsersPosts$ = this.actions$
    .ofType(LOAD_USERS_POSTS)
    .pipe(
      switchMap((action: LoadUsersPosts) => from(action.payload)),
      map(user => new LoadPosts(user))
    );

The switchMap operator within this code will transform the outer observable into multiple inner observables based on the array provided in "action.payload" using the "from" Observable creator.

By using the "from" Observable creator, an observable stream is created from the array, emitting one value at a time.

The map operator then transforms these values into actions.

It's worth noting that switchMap is preferred over mergeMap in this scenario. While mergeMap provides output for all requests, switchMap cancels all but the latest request.

Answer 4

To achieve this functionality, you can use the following code snippet:

@Effect()
  loadUsersPosts$ = this.actions$
    .ofType(LOAD_USERS_POSTS)
    .pipe(
      switchMap((action: LoadUsersPosts) => from(action.payload)),
      map(user => new LoadPosts(user))
    );

The switchMap operator within this code will transform the outer observable into multiple inner observables based on the array provided in "action.payload" using the "from" Observable creator.

By using the "from" Observable creator, an observable stream is created from the array, emitting one value at a time.

The map operator then transforms these values into actions.

It's worth noting that switchMap is preferred over mergeMap in this scenario. While mergeMap provides output for all requests, switchMap cancels all but the latest request.

Splitting Ngrx actions for individual items into multiple actions

Answer №1

Answer №2

Similar questions

Is there a way to retrieve the timezone based on a province or state in TypeScript on the frontend?

What is the best way to convert canvas data into a string in Angular once the user has made a drawing on it?

Refreshing a page while preserving the same URL

Angular, manipulating components through class references instead of creating or destroying them

Encountering Error 203 while trying to establish a connection between Angular and Django Rest Api

Designing a Test Specification for the @Input feature in Angular 2

Using variables to replace 'placeholders' in Typescript with string interpolation

Is it acceptable to include a @types library as a regular dependency in the package.json file of a Typescript library?

Angular Custom Validator Error (Validation function must either return a Promise or an Observable)

When utilizing Next.js with TypeScript, you may encounter an error message stating that the property 'className' is not found on the type 'IntrinsicAttributes & IntrinsicClassAttributes'

Issue encountered while attempting to compare '[object Object]'. This operation is restricted to arrays and iterables

Accessing external data in Angular outside of a subscription method for an observable

Angular - Mark all checkboxes on/off

Searching in TypeScript tables with Angular's search bar

The health check URL is experiencing issues: Unable to locate any routes

Creating a Higher Order Component (HOC) for your Next.js page

Execute an Asynchronous Operation in NgRx After Triggering an Action

Router failure resulted in an internal server error

A Promise is automatically returned by async functions

Angular2's asynchronous data binding is still lagging even after the data has been successfully loaded