@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 angular/router to ngrx/store

Installation

npm install @ngrx/router-store --save

Setup

1. Use the routerReducer when providing the StoreModule.provideStore and add the RouterStoreModule.connectRouter to the @NgModule.imports:

import { StoreModule } from '@ngrx/store';
import { routerReducer, RouterStoreModule } from '@ngrx/router-store';

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.provideStore({ router: routerReducer }),
    RouterStoreModule.connectRouter()
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

1. Add RouterState to main application state:

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

export interface AppState {
  router: RouterState;
};

1. (Optional) Set the initial value for the router state:

StoreModule.provideStore({ router: routerReducer }, {
  router: {
    path: window.location.pathname + window.location.search
  }
})

Dispatching Actions

import { go, replace, search, show, back, forward } from '@ngrx/router-store';

Navigation with a new state into history

store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));

Navigation with replacing the current state in history

store.dispatch(replace(['/path'], { query: 'string' }));

Navigation without pushing a new state into history

store.dispatch(show(['/path'], { query: 'string' }));

Navigation with only changing query parameters

store.dispatch(search({ query: 'string' }));

Navigating back

store.dispatch(back());

Navigating forward

store.dispatch(forward());

Navigation Extras

The Angular Router Navigation Extras are supported with each router action.

import { NavigationExtras } from '@angular/router';

let extras: NavigationExtras = {
  relativeTo: ActivatedRoute,
  fragment: string,
  preserveQueryParams: boolean,
  preserveFragment: boolean,
  skipLocationChange: boolean,
  replaceUrl: boolean
};

store.dispatch(go(['path', { routeParam: 1 }], { query: 'string' }, extras));