@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

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

License: MIT

Changelog

8.0.0-rc.0 (2019-05-30)

Bug Fixes

• update signature for createSelectorFactory and createSelector to return a MemoizedSelector (#1883) (8b31da7)
• store: adjust mock store to handle selectors with props (#1878) (a7ded00), closes #1864 #1873

Features

• effects: resubscribe to effects on error (#1881) (71137e5)
• example: add examples of effects not based on the Actions stream (#1845) (3454e70), closes #1830
• router-store: add routerState config option (#1847) (d874cfc), closes #1834
• router-store: add selectors for router state (#1874) (21c67cc), closes #1854
• store: split immutibility checks in state and action checks (#1894) (c59c211)

Reverts

• store: store should fail synchronously (#1871) (59a9e6c), closes #1865

BREAKING CHANGES

• effects: Prior to introduction of automatic resubscriptions on errors, all effects had effectively {resubscribeOnError: false} behavior. For the rare cases when this is still wanted please add {resubscribeOnError: false} to the effect metadata.

BEFORE:

login$ = createEffect(() =>
  this.actions$.pipe(
    ofType(LoginPageActions.login),
    mapToAction(
      // Happy path callback
      (action) => this.authService.login(action.credentials).pipe(map((user) => AuthApiActions.loginSuccess({ user }))),
      // error callback
      (error) => AuthApiActions.loginFailure({ error })
    )
  )
);

AFTER:

login$ = createEffect(
  () =>
    this.actions$.pipe(
      ofType(LoginPageActions.login),
      mapToAction(
        // Happy path callback
        (action) => this.authService.login(action.credentials).pipe(map((user) => AuthApiActions.loginSuccess({ user }))),
        // error callback
        (error) => AuthApiActions.loginFailure({ error })
      )
      // Errors are handled and it is safe to disable resubscription
    ),
  { resubscribeOnError: false }
);

• The return type of the createSelectorFactory and createSelector is now a MemoizedSelector instead of a Selector

<a name="8.0.0-beta.2"></a>