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

Question

我有一个效果函数，我试图将数据从我的分派操作以及一个单独的选择器传递到服务中的函数，但我迷失了 RXJS 语法。我很确定我没有正确映射数据。请看相关代码。

// 效果

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

// 服务

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

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

Visual Studio 代码在整个函数下划线，我在控制台中收到以下错误。

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

如何修复我的效果并成功将我的操作和选择器传递给我的服务调用？

Answer 1

您需要使用来自 HTTP 服务的 switchMap/mergeMap/concatMap/exhaustMap 到 "unbox" observable -> switchMap 的结果 -> map 到 action 比如你的效果必须 return 动作（比如它只是带有动作调度的默认效果）。

此外，我建议 API 方法将更改作为参数，而不是操作。

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);
}

类似这样。

P.S。添加了一些 "invented" 类型以显示正在发生的事情和位置

P.S.S没有检查代码中的错别字，这样就把答案写对了window

GL :)

Answer 2

对于其他人，他们可能会遇到我发现的相同问题。我没有返回操作。

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

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

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

angular

rxjs

ngrx

ngrx-effects