web-dev-qa-db-ja.com

ngrx-router-storeを使用してngrxエフェクト内のルートパラメータを取得するにはどうすればよいですか？

ルーターのパラメーター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))
          )
        );
    })
  );

ペイロードでルーターパラメータを取得したいので、コンポーネントからペイロードを渡す必要はなく、エフェクトクラスから直接取得します。

angularngrxngrx-storengrx-effectsngrx-store-4.0
7
Borad Akash

アプリルーターの状態にマッピングするセレクターが既にある場合：

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

次に、 withLatestFrom from rxjs/operatorsを使用して、ルーターの状態からパラメーターを取得し、次のようにアクションのペイロードとマージできます。

@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)))
        );
    })
);
9
Salem Ouerdani