Как правильно использовать NGRX Routers? - PullRequest
Новая
       34

Как правильно использовать NGRX Routers?

0 голосов
/ 18 июня 2020

Честно говоря, я был полностью потерян из-за документации, и, кроме того, мне было интересно следующее:

Если я использую NGRX Router, мне нужно будет использовать angular родной app-rounting? Если да, то как мне интегрировать NGRX Router с <router-outlet>?

Не могли бы вы дать мне простой пример того же?

1 Ответ

1 голос
/ 23 июня 2020

Angular Маршрутизатор и маршрутизатор NGRX работают вместе. Angular Маршрутизатор отвечает за фактическую маршрутизацию в приложении, а маршрутизатор NGRX отвечает за получение информации от маршрутизатора Angular, ниже приведен простой пример использования навигации без NGRX. 

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

}

Follow документация NGRX Router для настройки хранилища.

ниже приведен способ использования Angular маршрутизации с NGRX

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 (Эффект обрабатывает побочные эффекты, улавливает отправку действий навигации от компонента и выполняет фактическую маршрутизацию) 

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 et c.

, например, вам нужно получить список пользователей по отделам, а идентификатор отдела находится в параметре запроса URL 

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

Правильный способ чтения параметра запроса - через селектор selectQueryParams, предоставленный библиотекой NGRX 

export const selectSelectedDepatmentId = selectQueryParam('deparmentId');

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