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

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