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

Комментарии