@ngrx/router-store

What is @ngrx/router-store?

@ngrx/router-store is an Angular library that integrates the Angular Router with the NgRx state management library. It allows you to manage and synchronize the router state with the NgRx store, providing a single source of truth for your application's state.

What are @ngrx/router-store's main functionalities?

Router State Management

This feature allows you to manage the router state within the NgRx store. The code sample demonstrates how to set up the StoreRouterConnectingModule and routerReducer in your Angular module.

import { StoreRouterConnectingModule, routerReducer, RouterStateSerializer } from '@ngrx/router-store';

@NgModule({
  imports: [
    StoreModule.forRoot({ router: routerReducer }),
    StoreRouterConnectingModule.forRoot()
  ],
  providers: [
    { provide: RouterStateSerializer, useClass: CustomSerializer }
  ]
})
export class AppModule {}

Custom Router State Serializer

This feature allows you to create a custom serializer for the router state. The code sample shows how to implement a custom RouterStateSerializer to define how the router state should be serialized.

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

export interface RouterStateUrl {
  url: string;
  params: Params;
  queryParams: Params;
}

export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    const { url } = routerState;
    const { queryParams } = routerState.root;
    let state: ActivatedRouteSnapshot = routerState.root;
    while (state.firstChild) {
      state = state.firstChild;
    }
    const { params } = state;
    return { url, params, queryParams };
  }
}

Router State Selectors

This feature provides selectors to access the router state from the NgRx store. The code sample demonstrates how to create a selector to get the current URL from the router state.

import { createSelector } from '@ngrx/store';
import { RouterReducerState } from '@ngrx/router-store';

export const selectRouter = (state: AppState) => state.router;

export const selectCurrentUrl = createSelector(
  selectRouter,
  (routerState: RouterReducerState<RouterStateUrl>) => routerState.state.url
);

0

README

@ngrx/router-store

The sources for this package are in the main NgRx repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

13.0.0-beta.0 (2021-11-04)

Bug Fixes

• component: remove class-level generic from PushPipe (#3127) (548c72c), closes #3114
• store: infer initial store state properly with metareducers (#3102) (d003b85), closes #3007
• store: remove store config from forFeature signature with slice (#3218) (b1a64dd), closes #3216

build

• build packages with Ivy (#3219) (9e28050)

Features

• effects: move createEffect migration to ng-update migration (#3074) (5974913)
• store: add createFeatureSelector migration (#3214) (62334f9)
• store: provide better TS errors for action creator props (#3060) (5ed3c3d), closes #2892

BREAKING CHANGES

• The minimum version required for Angular and RxJS has been updated

BEFORE:

Angular 12.x is the minimum version RxJS 6.5.x is the minimum required version

AFTER:

Angular 13.0.0-RC.0 is the minimum version RxJS 7.4.x is the minimum required version

• store: The StoreConfig argument is removed from the StoreModule.forFeature signature with FeatureSlice.

BEFORE:

The StoreModule.forFeature signature with FeatureSlice has StoreConfig as the second input argument, but the configuration isn't registered if passed.

AFTER:

The StoreModule.forFeature signature with FeatureSlice no longer has StoreConfig as the second input argument.

• store: initialState needs to match the interface of the store/feature.

BEFORE:

Missing properties were valid

StoreModule.forRoot(reducers, {
  initialState: { notExisting: 3 },
  metaReducers: [metaReducer],
});

AFTER:

A type error is produced for initialState that does not match the store/feature

StoreModule.forRoot(reducers, {
  initialState: { notExisting: 3 },
  metaReducers: [metaReducer],
});

• component: PushPipe no longer has a class-level generic type parameter.

BEFORE:

Use of PushPipe outside of component templates required a generic

AFTER:

Use of PushPipe outside of component templates no longer requires a generic

• store: Types for props outside an action creator is more strictly checked

BEFORE:

Usage of props outside of an action creator with invalid types was allowed

AFTER:

Usage of props outside of an action creator now breaks for invalid types

• effects: The create-effect-migration migration is removed

BEFORE:

The Effect decorator removal and migration are done manually through schematics.

AFTER:

The Effect decorator removal and migration are performed automatically on upgrade to version 13 of NgRx Effects.

<a name="12.5.1"></a>