如何使用 ngrx-router-store 在 ngrx 效果中获取路由参数？

Posted 2023-02-19

【中文标题】如何使用 ngrx-router-store 在 ngrx 效果中获取路由参数？

【英文标题】：How to get route params inside ngrx effects using ngrx-router-store?

【发布时间】：2018-06-20 09:18:25

【问题描述】：

我有一个效果类，我想根据路由器参数 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))
          )
        );
    )
  );

我想在payload中获取路由器参数，这样我就不用从组件中传递payload，而是直接从效果类中获取。

【参考方案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)))
        );
    )
);

【讨论】：

嗨塞勒姆。你能解释一下selector mapping to your app router state:。我不知道how to create a selector mapping to my router state。你能解释一下或告诉我可以从哪里了解它的来源吗？

@Raj Todd Motto 在这个精彩的视频中更好地解释了这一点：youtu.be/YsG44g6_Fo0。您还将在本文中找到另一个示例：blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8

嗨，Salem，经过您的解决方案后，我可以访问路由器参数。我还想从路由解析器访问数据。你能看看这个question