Перейти к содержанию

Router store

Для связки модуля маршрутизации с хранилищем используйте NgRx Router State, который позволяет отслеживать процесс смены URL в Angular приложении с помощью действий.

NgRx Router Store устанавливается отдельно.

npm i @ngrx/router-store --save

Далее необходимо импортировать нужные модули в корневой модуль вашего Angular приложения.

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({router: routerReducer}),
    StoreRouterConnectingModule.forRoot(),
  ],
})

Сама структура состояния router выглядит следующим образом.

{
    state: {
        root: {/*...*/},
        url: '/'
    },
    navigationId: 1
}

Описание объекта состояния NgRx Router Store:

  • state - информация в текущем маршруте, содержит два свойства:
  • root - экземпляр корневого маршрута;
  • url - текущий URL-адрес;
  • navigationId - порядковый номер смены маршрутизации в рамках текущей сессии работы Angular приложения.

В NgRx Router Store предусмотрены пять действий, каждое из которых представляет одну из стадий процесса смены маршрута:

  • ROUTER_REQUEST - начало перехода на другой URL;
  • ROUTER_NAVIGATION - сам процесс перехода, вызывается до выполнения всех Guards и Resolvers;
  • ROUTER_NAVIGATED - успешный переход на заданный URL;
  • ROUTER_CANCEL - генерируется, если смена URL была заблокирована Guard или Resolver;
  • ROUTER_ERROR - генерируется, если в процессе перехода возникает ошибка

Действия ROUTER_CANCEL и ROUTER_ERROR содержат информацию в маршруте с которого осуществляется переход.

Конфигурация NgRx Router Store

Метод StoreRouterConnectingModule.forRoot() в качестве необязательного параметра принимает объект с пользовательскими настройками NgRx Router Store.

Передаваемый объект должен реализовывать интерфейс StoreRouterConfig с тремя не обязательными свойствами:

  • stateKey - имя части глобального состояния, в которой будут храниться все данные маршрутизации (по умолчанию router); помимо строки может принимать селектор;
  • serializer - позволяет кастомизировать структуру данных состояния, которое передается в каждом действии;
  • navigationActionTiming - определяет момент генерации действия ROUTER_NAVIGATION и может быть либо NavigationActionTiming.PreActivation (по умолчанию), либо NavigationActionTiming.PostActivation.

NavigationActionTiming.PreActivation означает, что ROUTER_NAVIGATION будет сгенерировано до вызова всех Guards и Resolvers, а NavigationActionTiming.PostActivation - после.

Рассмотрим пример использования serializer.

import {
  Params,
  RouterStateSnapshot,
  Data,
} from '@angular/router';
import { RouterStateSerializer } from '@ngrx/router-store';

export interface AppRouterStateUrl {
  url: string;
  params: Params;
  queryParams: Params;
  data: Data;
}

export class AppSerializer
  implements RouterStateSerializer<AppRouterStateUrl> {
  serialize(state: RouterStateSnapshot): AppRouterStateUrl {
    let currentRoute = state.root;

    while (currentRoute.firstChild) {
      currentRoute = currentRoute.firstChild;
    }

    const {
      url,
      root: { queryParams },
    } = state;
    const { params, data } = currentRoute;

    return { url, params, queryParams, data };
  }
}

И затем в app.module.ts.

StoreRouterConnectingModule.forRoot({
  serializer: CustomSerializer,
});

Комментарии