如何使用ngrx-router-store在ngrx效果中獲取路徑參數？

Question

我有效果類，我想根據路由器參數ID加載詳細信息

@Effect()
  getDetails$ = this.actions$.ofType(DetailActions.GET_DETAILS).pipe(
    map(toPayload),
    switchMap(payload => {
      return this.detailService
        .getDetail(payload)//I want router params here in payload
        .pipe(
          map(detail=> new DetailActions.GetDetailSuccess(detail)),
          catchError(error =>
            Observable.of(new DetailActions.GetDetailFail(error))
          )
        );
    })
  );

我想在有效負載中獲取路由器參數，這樣我就不必從組件傳遞有效負載，而是直接從特技類中獲取它。

Answer 1

如果您已經有一個選擇器映射到您的應用程序路由器狀態：

export const getRouterState = createFeatureSelector<
  fromRouter.RouterReducerState<RouterStateUrl>
>('router');

然后你可以使用來自rxjs/operators withLatestFrom從路由器狀態獲取你的參數，並可能將它們與你的動作的有效負載合並，如下所示：

@Effect()
getDetails$ = this.actions$.pipe(
    ofType(DetailActions.GET_DETAILS),
    withLatestFrom(
        this.store.select(fromRoot.getRouterState),
        (action, router) => {
            // do your logic here
            // and return a newPayload:
            return {
                id: router.state.params.id,
                payload: action.payload
            }
        }
    ),
    switchMap(newPayload => {
        return this.detailService
        .getDetail(newPayload)
        .pipe(
            map(detail=> new DetailActions.GetDetailSuccess(detail)),
            catchError(error => Observable.of(new DetailActions.GetDetailFail(error)))
        );
    })
);