Search code examples
angularrxjsngrxngrx-effects

How do I pass two different pieces of state from my ngrx effect to my service function?


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?


Solution

  • 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
        )
    )