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

Question

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.

score 13 · Accepted Answer · answered Feb 06 '18 at 20:42

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

Hi Salem. Can you explain `selector mapping to your app router state:`. I have no idea `how to create a selector mapping to my router state`. Can you please explain or tell sources where i can learn about it? — Raj, Oct 11 '18 at 10:07
@Raj it is better explained by Todd Motto in this great video: https://youtu.be/YsG44g6_Fo0. You will also find another example in this article: https://blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8 — Salem Ouerdani, Oct 11 '18 at 13:55
Hi Salem, I could access router params in effects, after going through your solution. I also want to access data from the route resolver. Can you please have a look at this [question](https://stackoverflow.com/questions/52814451/how-to-access-activatedroute-resolver-data-in-ngrx-effects-v6) — Raj, Oct 15 '18 at 10:19

Rafique Mohammed · Answer 2 · 2023-08-24T16:10:50.900

NgRx already provides loads of selectors for you to use it. Please Refer NgRx Docs (https://v8.ngrx.io/guide/router-store/selectors)

import { getRouterSelectors, RouterReducerState } from '@ngrx/router-store';
import { createFeatureSelector } from '@ngrx/store';

export const ROUTER_FEATURE_KEY = 'router';

export const selectRouter =
    createFeatureSelector<RouterReducerState>(ROUTER_FEATURE_KEY);

export const {
    selectCurrentRoute, // select the current route
    selectFragment, // select the current route fragment
    selectQueryParams, // select the current route query params
    selectQueryParam, // factory function to select a query param
    selectRouteParams, // select the current route params
    selectRouteParam, // factory function to select a route param
    selectRouteData, // select the current route data
    selectUrl, // select the current url
} = getRouterSelectors(selectRouter);

To Use it in your effects, simply do the below (taking from above code example) :

    this.actions$.pipe(
    ...
    concatLatestFrom(
        this.store.select(selectQueryParams)
    ),
switchMap((queryParams) => { // <--- queryParams from selectors
    return this.detailService
    .getDetail(queryParams) // <-- use it for any logic
    ...
    );
})
);

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

2 Answers2