@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

Bindings to connect ngrx/router to ngrx/store

Setup

1. Use npm to install the bindings:

npm install @ngrx/router-store --save

1. Use the routerReducer when providing Store:

import { provideStore } from '@ngrx/store';
import { routerReducer } from '@ngrx/router-store';


export const storeProvider = provideStore({
  // Your reducers go here,
  router: routerReducer
});

1. Install the bindings providers after you setup the router providers:

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

bootstrap(App, [
  storeProvider,
  provideRouter(routes),
  connectRouterToStore()
]);

Changelog

11.0.0-beta.0 (2021-01-05)

Bug Fixes

• update Angular peer dependencies to version 11 (#2843) (f63d281), closes #2842
• component: add schematic assets to ng-package.json (9598527), closes #2819
• component-store: add schematic assets to ng-package.json (0e3b52d), closes #2819
• component-store: adjust updater to accept partials (#2765) (b54b9b6), closes #2754
• router-store: ingore slash when comparing routes (#2834) (cad3f60), closes #2829 #1781
• schematics: add schematics to devDependencies (#2784) (daf1889)
• store: add noop for all methods in MockReducerManager (#2777) (a489b48), closes #2776
• store: correct types for SelectorFactoryConfig (#2752) (aa9bf1a)

Code Refactoring

• use consistent naming of injection tokens across packages (#2737) (e02d0d4)

Features

• component-store: add patchState method (#2788) (ecedadb)
• component-store: add tapResponse operator (#2763) (d1873c9)
• component-store: allow more than 4 selects (#2841) (7c29320)
• effects: add support for provideMockActions outside of the TestBed (#2762) (c47114c)
• effects: allow usage of empty forRoot array multiple times (#2774) (5219ff5)
• entity: remove addAll (#2783) (93a4754)
• router-store: add selectParamFromRouterState selector (#2771) (3a1f359), closes #2758
• router-store: Add urlAfterRedirects (#2775) (14553f6)
• store: add object-style StoreModule.forFeature overload (#2821) (17571e5), closes #2809
• store: add support for provideMockStore outside of the TestBed (#2759) (1650582), closes #2745

Performance Improvements

• router-store: optimize selectQueryParams, selectQueryParam and selectFragment selectors (#2764) (918f184)

BREAKING CHANGES

• router-store: Router-store selectors for query params and fragment select from the root router state node. This could potentially break unit tests, but is functionally equivalent to the current behavior at runtime.

BEFORE:

selectQueryParams - returns query params from the last router state node selectQueryParam - returns a query param from the last router state node selectFragment - returns the fragment from the last router state node

AFTER:

selectQueryParams - returns query params from routerState.root selectQueryParam - returns a query param from routerState.root selectFragment - returns the fragment from routerState.root

• Angular peer dependency versions are bumped to latest major (11)

BEFORE:

Minimum Angular peer dependency version is ^10.0.0

AFTER:

Minimum Angular peer dependency version is ^11.0.0

• entity: To overwrite the entities, we previously used the addAll method but the method name was confusing.

BEFORE:

adapter.addAll(action.entities, state);

AFTER:

The new method name setAll describes the intention better.

adapter.setAll(action.entities, state);

• refactor(data): use the setAll adapter method
• The initial state Injection Token for @ngrx/component-store has been renamed

BEFORE:

Injection Token is initialStateToken

AFTER:

Injection Token is INITIAL_STATE_TOKEN

<a name="10.0.1"></a>