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
11.0.0-beta.2 (2021-02-02)
Bug Fixes
- component: remove ? from LetViewContext props to prevent 'possibly undefined' error in strict mode (#2876) (c3ac252)
- component: transform to Observable if Input is Promise (b611367)
- data: make entity param partial when is not optimistic (#2899) (bb70e6c), closes #2870
- data: type overloaded add for is optimistic true | undefined (#2906) (6d46ac4)
- push: fix return typing for observables to include undefined (#2907) (abcc599), closes #2888
- router-store: cast return type as RouterReducerState (#2887) (d489484)
Features
Performance Improvements
- schematics: speed up create effect migration (#2873) (2f5dcb4)
BREAKING CHANGES
ngrxPush typing doesn't consider undefined
when the input type is an observable
AFTER:
ngrxPush typing considers undefined
when the input type is an observable
<a name="11.0.0-beta.0"></a>