@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

15.0.0-rc.0 (2022-11-23)

Features

• component: clear LetDirective view when replaced observable is in suspense state (#3671) (ec59c4b)
• component: remove $ prefix from LetViewContext property names (#3670) (b3b21e6)

BREAKING CHANGES

• component: The LetDirective view will be cleared when the replaced observable is in a suspense state. Also, the suspense property is removed from the LetViewContext because it would always be false when the LetDirective view is rendered. Instead of suspense property, use the suspense template to handle the suspense state.

BEFORE:

The LetDirective view will not be cleared when the replaced observable is in a suspense state and the suspense template is not passed:

@Component({
  template: `
    <!-- When button is clicked, the 'LetDirective' view won't be cleared. -->
    <!-- Instead, the value of 'o' will be 'undefined' until the replaced -->
    <!-- observable emits the first value (after 1 second). -->
    <p *ngrxLet="obs$ as o">{{ o }}</p>
    <button (click)="replaceObs()">Replace Observable</button>
  `,
})
export class TestComponent {
  obs$ = of(1);

  replaceObs(): void {
    this.obs$ = of(2).pipe(delay(1000));
  }
}

AFTER:

The LetDirective view will be cleared when the replaced observable is in a suspense state and the suspense template is not passed:

@Component({
  template: `
    <!-- When button is clicked, the 'LetDirective' view will be cleared. -->
    <!-- The view will be created again when the replaced observable -->
    <!-- emits the first value (after 1 second). -->
    <p *ngrxLet="obs$ as o">{{ o }}</p>
    <button (click)="replaceObs()">Replace Observable</button>
  `,
})
export class TestComponent {
  obs$ = of(1);

  replaceObs(): void {
    this.obs$ = of(2).pipe(delay(1000));
  }
}

• component: The $ prefix is removed from LetViewContext property names.

BEFORE:

<ng-container *ngrxLet="obs$; $error as e; $complete as c"> ... </ng-container>

AFTER:

<ng-container *ngrxLet="obs$; error as e; complete as c"> ... </ng-container>

<a name="15.0.0-beta.1"></a>