将参数添加到有效的选择器

Question

我有以下

  createMission$ = this.actions$.pipe(
    ofType<featureActions.CreateMissionRequest>(featureActions.ActionTypes.CreateMissionRequest),
    withLatestFrom(this.store$.select(MissionsStoreSelectors.getById(), {id : action.payload.routeId}))
    switchMap((action) =>
      this.dataService.createMission(action.payload.mission).pipe(
        map(response => new featureActions.CreateMissionSuccess({response, mission : action.payload.mission})),
        catchError((error: HttpErrorResponse) => {
          this.snackBar.open(this.translate.instant('ERROR.HTTP.GENERIC'), this.translate.instant('BUTTON.OK'), {duration: 2500});
          return of(new featureActions.CreateMissionFailed({error}));
        }),
      ),
    ),
  );

问题是，在 withLatestFrom 中，我想在选择器中使用来自操作的参数。我该如何实现？

    withLatestFrom(this.store$.select(MissionsStoreSelectors.getById(), {id : action.payload.routeId}))
    switchMap((action, valueFromLatest) =>

编辑：我试过了

  @Effect()
  createMission$ = this.actions$.pipe(
    ofType<featureActions.CreateMissionRequest>(featureActions.ActionTypes.AssignMissionRequest),
    withLatestFrom((action) => this.store$.select(MissionsStoreSelectors.getById(), {id : action.payload.routeId})),
    switchMap((mission, action) =>
      this.dataService.createMission(action.payload.mission).pipe(
        map(response => new featureActions.CreateMissionSuccess({response, mission : action.payload.mission})),
        catchError((error: HttpErrorResponse) => {
          this.snackBar.open(this.translate.instant('ERROR.HTTP.GENERIC'), this.translate.instant('BUTTON.OK'), {duration: 2500});
          return of(new featureActions.CreateMissionFailed({error}));
        }),
      ),
    ),
  );

但我在 action.payload 上有类型错误（操作变成了数字）似乎不起作用

Answer 1

您可以使用 switchMap 和 combineLatest 来实现这一点，但我没有在您的代码中看到您希望在何处使用选择器的结果（数据来自选择器）。我假设原始操作 (CreateMissionRequest) 在其有效负载中有两个属性：routeId 和 mission。但这没有任何意义，因为您使用了选择器并且再也没有使用它的结果。但是你可以通过查看下面的技术来了解整体思路，然后做任何你想做的事情。

已更新

createMission$ = this.actions$.pipe(
    ofType<featureActions.CreateMissionRequest>(featureActions.ActionTypes.CreateMissionRequest),
    // This is where you use the switchMap
    switchMap((action) =>
        // combineLatest here makes it possible to pass forward the results
        // from the selector and the original action if you need
        combineLatest([ 
          this.store$.pipe(select(MissionsStoreSelectors.getById(), {id : action.payload.routeId}),take(1)),
          of(action.payload.routeId),
        ])),
    switchMap(([mission,routeId]) =>
      this.dataService.createMission(mission).pipe(
        map(response => new featureActions.CreateMissionSuccess({response, mission})),
        catchError((error: HttpErrorResponse) => {
          this.snackBar.open(this.translate.instant('ERROR.HTTP.GENERIC'), this.translate.instant('BUTTON.OK'), {duration: 2500});
          return of(new featureActions.CreateMissionFailed({error}));
        }),
      ),
    ),
  );

事实上，如果您只需要将一个 observable 转换为另一个，switchMap 可以为您完成这项工作，不需要 combineLatest:

createMission$ = this.actions$.pipe(
    ofType<featureActions.CreateMissionRequest>(featureActions.ActionTypes.CreateMissionRequest),
    switchMap((action) =>  
        this.store$.pipe(select(MissionsStoreSelectors.getById(), {id : action.payload.routeId}),take(1))),
    switchMap((mission) =>
      this.dataService.createMission(mission).pipe(
        map(response => new featureActions.CreateMissionSuccess({response, mission})),
        catchError((error: HttpErrorResponse) => {
          this.snackBar.open(this.translate.instant('ERROR.HTTP.GENERIC'), this.translate.instant('BUTTON.OK'), {duration: 2500});
          return of(new featureActions.CreateMissionFailed({error}));
        }),
      ),
    ),
  );

将参数添加到有效的选择器

add a parameter to a selector in effect

store

ngrx

angular