如何将两个不同的状态从我的 ngrx 效果传递到我的服务功能？

Question

I have an effects function where I'm trying to pass data from my dispatched action as well as a separate selector to a function in a service, but I'm getting lost in the RXJS syntax. I'm pretty sure I'm not mapping the data correctly. Please see the relevant code.

// effects

 updateCohort$ = createEffect(() =>
    this.actions$.pipe(
        ofType(getCohortActions.updateActiveCohort.type),
        withLatestFrom(this.store.pipe(select(activeCohort))),
        map(([action, selector ]) => (
            this.cohortFeaturesServices.updateCohorts(action, selector)
        )),

// service

public updateCohorts(action, selector): Observable<any> {
    const url = `api/services/cohorts/frontend/`;

    return this.http.patch(`${url}/${selector.id}/`, action.changes);
}

Visual Studio Code underlines the entire function and I get the following error in my console.

Type 'Observable>' is not assignable to type 'Observable'. Property 'type' is missing in type 'Observable' but required in type 'Action'.

How can I fix my effect and successfully pass my action and my selector to my service call?

Answer 1

You need to use switchMap/mergeMap/concatMap/exhaustMap to "unbox" observable coming from HTTP service -> result of switchMap -> map into action such as your effect must return actions(such as it is just a default effect with action dispatch).

Also, I suggest that the API method would have the changes as parameters, not an action.

updateCohort$ = createEffect(() =>
  this.actions$.pipe(
    ofType(getCohortActions.updateActiveCohort.type),
    withLatestFrom(this.store.pipe(select(activeCohort))),
    switchMap(([action, cohort]) =>
      this.cohortFeaturesServices.updateCohorts(action.changes, cohort)
    ),
    map((result: CohortUpdateResponse) => successCohortUpdateAction())
  )
)


public updateCohorts(changes: Partial<Cohort>, cohort: Cohort): Observable<CohortUpdateResponse> {
  const url = `api/services/cohorts/frontend/`;

  return this.http.patch(`${url}/${cohort.id}/`, changes);
}

Something like this.

PS added some "invented" types to show what is going on and where

PSS didn't check for typos in code, such wrote answer right in answer window

GL :)

Answer 2

For anyone else they may come across the same issue I figured it out. I wasn't returning an action.

updateCohort$ = createEffect(() =>
    this.actions$.pipe(
        ofType(getCohortActions.updateActiveCohort.type),
        withLatestFrom(this.store.pipe(select(activeCohort))),
        exhaustMap(([action, cohort]) => this.cohortFeaturesServices.updateCohorts(action, cohort).pipe(

        )),
        map((response) => ({
            type: getCohortActions.updateActiveCohortSuccess.type, // success action
            success: response
        })),
        catchError((err) => of(getCohortActions.updateActiveCohortError(err))) // error action
    )
)