angularngrxngrx-storengrx-effectsngrx-store-4.0

How to get route params inside ngrx effects using ngrx-router-store?


I am having effect class where I want to load details based on router params 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))
          )
        );
    })
  );

I want to get router params in payload, so that I don't have to pass payload from component but directly get it from effects class.


Solution

  • If you already have a selector mapping to your app router state:

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

    Then you can use withLatestFrom from rxjs/operators to get your params from the router state and maybe merge them with your action's payload, something like what follows:

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