@ngrx/router-store
Advanced tools
@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.
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
);The sources for this package are in the main NgRx repo. Please file issues and pull requests against that repo.
License: MIT
9.0.0-beta.0 (2020-02-06)
BEFORE:
If no router state serializer is provided through the configuration of router store, the DefaultRouterStateSerializer is used.
AFTER:
If no router state serializer is provided through the configuration of router store, the MinimalRouterStateSerializer is used.
resubscribeOnError renamed to useEffectsErrorHandler in createEffect metadataBEFORE:
class MyEffects {
effect$ = createEffect(() => stream$, {
resubscribeOnError: true, // default
});
}
AFTER:
class MyEffects {
effect$ = createEffect(() => stream$, {
useEffectsErrorHandler: true, // default
});
}
When the effect class was registered, the init action would be dispatched. If the effect was provided in multiple lazy loaded modules, the init action would be dispatched for every module.
AFTER:
The init action is only dispatched once The init action is now dispatched based on the identifier of the effect (via ngrxOnIdentifyEffects)
--spec to --skipTest.
By default skipTest is false, this way you will always be provided with *.spec.ts filesBEFORE:
ng generate action User --spec
AFTER:
ng generate action User
Using mockSelector.setResult(undefined) resulted in clearing the
return value.
AFTER:
Using mockSelector.setResult(undefined) will set the return value of
the selector to undefined.
To reset the mock selector, use mockSelector.clearResult().
styleExt option has been changed to style.BEFORE:
"@schematics/angular:component": {
"inlineStyle": true,
"prefix": "aio",
"styleext": "scss"
}
...
AFTER:
"@schematics/angular:component": {
"inlineStyle": true,
"prefix": "aio",
"style": "scss"
}
....
BEFORE:
Immutability checks are opt-in.
AFTER:
If state or action is mutated then there will be a run time exception thrown.
@ngrx/store will be generated.BEFORE:
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
StoreModule.forRoot(reducers, {
metaReducers,
runtimeChecks: {
strictStateImmutability: true,
strictActionImmutability: true
}
}),
.....
],
providers: [],
bootstrap: [AppComponent]
})
AFTER:
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
StoreModule.forRoot({})
....
],
providers: [],
bootstrap: [AppComponent]
})
The create functions weren't the default to create actions, reducers and effects
AFTER:
The create functions are the default to create actions (createAction, reducers (createReducer) and effects (createEffect) To fallback to the previous generators, use
sh ng generate reducer ReducerName --creators=false
<a name="8.6.0"></a>
FAQs
Bindings to connect @angular/router to @ngrx/store
The npm package @ngrx/router-store receives a total of 292,427 weekly downloads. As such, @ngrx/router-store popularity was classified as popular.
We found that @ngrx/router-store demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.