CODEWITHSUNDEEP
angularngrxeffectsngrx-effects
Joao Henrique Cavalcanti
Joao Henrique Cavalcanti

Reputation: 45

Effects with multiple actions angular

I am trying to create an effect which gather info from store (this.libraryReferencesStoreFacade.selectSelectedRows$) loops through it, and finally make multiple calls to another action (LibraryReferencesActions.patch({pathParameters: { id: 120},request: { id: row.id, group: 26 }}).

I tried the below code but without success, please help me ?

@Effect()
    someEffect$: Observable<Action> = this.actions$.pipe(
        ofType(LibraryReferencesActions.createGroupSuccess),
        withLatestFrom(this.libraryReferencesStoreFacade.selectSelectedRows$),
        switchMap(([, rows]) => {
            console.log(rows,"")
            let Observables: Array<Observable<any>> = [];
            rows.forEach((row) => {
                Observables.push(
                    LibraryReferencesActions.patch({
                        pathParameters: { id: 120 },
                        request: { id: row.id, group: 26 },
                    })
                );
            });
                const observables: Array<Observable<any>> = Observables;
                return forkJoin(observables).map(result => new 
                LibraryReferencesActions.refreshList())
            }
        })
    )

also tried:

addGroupToLib$ = createEffect(() => {
    return this.actions$.pipe(
        ofType(LibraryReferencesActions.createGroupSuccess),
        withLatestFrom(this.libraryReferencesStoreFacade.selectSelectedRows$),
        map(([, rows]) => {
            let Observables: any = [];
            rows.forEach((row) => {
                Observables.push(
                    LibraryReferencesActions.patch({
                        pathParameters: { id: 120 },
                        request: { id: 120, group: 26 },
                    })
                );
            });
            forkJoin(Observables).pipe(
                map(() => {
                    return LibraryReferencesActions.refreshList();
                })
            );
        })
    );
});

Upvotes: 1

Views: 610

Answers (1)

Steve Holgado
Steve Holgado

Reputation: 12071

I think you could just add the refreshList action to the end of the array of patch actions and they should run in order:

addGroupToLib$ = createEffect(() => {
  return this.actions$.pipe(
    ofType(LibraryReferencesActions.createGroupSuccess),
    withLatestFrom(this.libraryReferencesStoreFacade.selectSelectedRows$),
    switchMap(([, rows]) => {
      return rows
        .map(row => {
          return LibraryReferencesActions.patch({
            pathParameters: { id: 120 },
            request: { id: row.id, group: 26 }
          })
        })
        .concat(
          LibraryReferencesActions.refreshList()
        )
    })
  );
});

Upvotes: 1

Related Questions