angular - 如何正确使用 NGRX 路由器？

Question

老实说，我完全被文档迷失了，除了我想知道以下几点：

如果我使用NGRX Router，我需要使用 angular 的 nativeapp-rounting吗？如果是这样，我如何将NGRX Router与集成<router-outlet>？

你能给我一个同样的简单例子吗？

Answer 1

Angular 路由器和 NGRX 路由器一起工作。Angular 路由器负责应用程序中的实际路由，NGRX 路由器负责从 Angular 路由器中获取信息，以下是在没有 NGRX 的情况下使用导航的简单示例。

@Injectable()
export class SomeComponent {
  constructor(private router: Router) {}
  /*
  Your Component code  
  */
  onSubmit() {
    this.router.navigate(['/some-url'])
  }

}

按照NGRX 路由器文档设置存储。

以下是在 NGRX 中使用 Angular 路由的方法

router.action.ts（从组件调度操作以进行导航）

import { createAction, props } from '@ngrx/store';
import { NavigationExtras } from '@angular/router';

export enum RouterActionTypes {
  Go = '[Router] Go',
  Back = '[Router] Back'
}

export const Go = createAction(RouterActionTypes.Go, props<{ payload: { path: any[]; query?: object; extras?: NavigationExtras } }>());

export const Back = createAction(RouterActionTypes.Back);

router.effect.ts（Effect 处理副作用，它从组件捕获导航操作调度并执行实际路由）

import { Location } from '@angular/common';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { tap, map } from 'rxjs/operators';
import * as RouterActions from '../actions/router.actions';

@Injectable()
export class RouterEffects {
  constructor(private actions$: Actions, private router: Router, private location: Location) {}

  navigate$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(RouterActions.Go),
        map((action) => action.payload),
        tap(({ path, query: queryParams, extras }) => {
          this.router.navigate(path, { queryParams, ...extras });
        }),
      ),
    { dispatch: false },
  );

  navigateBack$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(RouterActions.Back),
        tap(() => this.location.back()),
      ),
    { dispatch: false },
  );
}

NGRX 提供内置选择器来获取路由信息，例如 queryParams、url 等。

例如，您必须按部门获取用户列表，并且部门 ID 在 URL 的查询参数中

https://localhost:4200/users?deparmentId=4

读取查询参数的正确方法是通过selectQueryParamsNGRX 库提供的选择器

export const selectSelectedDepatmentId = selectQueryParam('deparmentId');

export const selectUsersByDepartment = createSelector(
   selectUsers,
   selectSelectedDepatmentId,
   (users, departmentId) => users.filter(u => u.departmentId === departmentId)
);