Ngrx dispatching another action based on first action data

Question

I'm loading list of users using ngrx:

this.users$ = this.store.select(fromReducer.getUsers);

and in my html:

   <ul>
        <li *ngFor="let user of users$ | async">
            {{user.id}} - {{user.name}} - {{user.email}}
        </li>
   </ul>

I should display the list as i did, but also make another end point call to get the user that has id=1 phone address.

How can i do that? the second call is depends on the data from the 1st one.

should i make another action inside my effect?

@Effect() 
loadAllUsers$: Observable<Action> = this.actions$
  .ofType(fromActions.SHOW_ALL_USERS)
  .switchMap(() => 
     this.articleService.getAllUsers()
     .map(data => new fromActions.ShowAllUsersSuccessAction(data))  
  );

thanks

Personally I would of have the phone number loaded with the user since the data is related to the user. However in your situation I would have a separate effect for that. Then you can make a selector combining both of those. ex. createSelector(getUsers, fromPhone.getUsersPhone, (user, phone) = { ... your mapping here ... } — penleychan
It's not real world scenario - it's just for learning and testing. I want to know how to make 2 calls which the 2ed is depending the first...I don't have selectors in my test project — eladr

Fateh Mohamed Fateh Mohamed · Accepted Answer · 2018-08-13T15:17:03

try this

 import { Effect, Actions, ofType } from '@ngrx/effects';

 this.actions$.pipe(ofType(fromActions.SHOW_ALL_USERS),
    map((action: ShowAllUsersSuccessAction) => {
       // do your control here on action.payload , makes calls to get phones
       //return the new data
     }),
    switchMap(data => new fromActions.ShowAllUsersSuccessAction(data)) // trigger another action with the new data
);

Ngrx dispatching another action based on first action data

1 Answers