ngrx-router-state-plus
v2.0.3
Published
@ngrx/router-store extension that provides router state serialization with a common payload-composed state data
Downloads
10
Maintainers
Readme
ngrx-router-state-plus
@ngrx/router-store extension that provides router state serialization with a common payload-composed state data.
Features
- Router state serialization out of the box.
- Route state payload that extend all ActivatedRouteSnapshot properties.
- RxJS operators for using with effects:
ofRouterNav()
operator to filter by router navigation (NgRx ROUTER_NAVIGATION).ofRouterTokenSegmentsNav()
operator to filter by router token segment (E.gpage/:token_segment
).
- Selectors:
selectRouterNav()
selector to get current router state navigation.
Install
yarn add ngrx-router-state-plus
npm install ngrx-router-state-plus --save
Usage
Here a small example illustrating its usage.
Sample route path used: /page/:my_token_segment
app.module.ts
import { NgModule } from '@angular/core'
@NgModule({
imports: [
// StoreModule,
// EffectsModule,
// StoreRouterConnectingModule,
RouterStorePlusModule.forRoot({
// Optional token segment keys to mapping (needed to using with ofRouterTokenSegmentsNav)
urlTokenSegmentKeys: [ 'my_token_segment', 'another-key' ]
})
]
})
export class AppModule { }
page.effects.ts
import { Injectable } from '@angular/core'
import { Actions, Effect } from '@ngrx/effects'
import { ofRouterNav, ofRouterTokenSegmentsNav } from 'ngrx-router-state-plus'
import { PageNew, PageEdit } from 'some/actions/page.actions'
// Router token segment to using
// E.g `page/:my_token_segment`
const TOKEN_SEGMENT_KEY = 'my_token_segment'
@Injectable()
export class PageEffects {
// Example 1
// If you want to filter by router navigation only (ROUTER_NAVIGATION)
@Effect()
public page$ = this.actions$.pipe(
ofRouterNav(),
// switchMap()
// catchError()
// etc...
)
// Example 2
// If you want to filter by router navigation with token segment checks (ROUTER_NAVIGATION)
// New page effect
@Effect()
public pageNew$ = this.actions$.pipe(
ofRouterTokenSegmentsNav(TOKEN_SEGMENT_KEY, 'new'),
mapTo(() => new PageNew()),
// catchError(),
// etc...
)
// Edit page effect
@Effect()
public pageEdit$ = this.actions$.pipe(
ofRouterTokenSegmentsNav(TOKEN_SEGMENT_KEY, 'edit'),
mapTo(() => new PageEdit()),
// catchError(),
// etc...
)
constructor (private actions$: Actions) { }
}
page.component.ts
import { Component, OnInit } from '@angular/core'
import { selectRouterNav } from 'ngrx-router-state-plus'
interface MyTokenSegments {
my_token_segment: string
// other token segment...
}
@Component({
selector: 'app-page',
template: `...`
})
export class PageComponent {
// Some custom subscriptions here...
// 1. Router State subscription
private router$ = this.store.pipe(select(
// Selects current Router State feature
selectRouterNav<MyRootState, MyTokenSegments>()
))
constructor (private store: Store<MyRootState>) { }
// 2. Displaying current Router state value
ngOnInit () {
this.route$
// payload contains the `routeState` (RouterNavigationPayload)
.subscribe((payload) => console.log(state.routeState.urlTokenSegments))
.unsubscribe()
}
}
API
Modules
- RouterStorePlusModule: The main module to importing into your app.
Serializer
Router state serialization is out of the box.
Router State Plus
RouterStatePlusActivatedSnapshot<RouterTokenSegments>
is router activated state interface that extend of Angular ActivatedRouteSnapshot.
But there are only three differences at properties level:
url
type isstring
(updated prop)urlSegments
type isUrlSegment[]
(new prop).url
inActivatedRouteSnapshot
.urlTokenSegments
is RouterStateTokenSegments (new prop)
Since it's based on ActivatedRouteSnapshot
, you can also access to their properties as usual with the exception that url
was moved to urlSegments
and url
is now current string url.
More details about available properties at router-state.ts file.
Operators
RxJS operators:
- ofRouterNav: Operator to filter by router navigation (NgRx ROUTER_NAVIGATION) for using with effects.
- ofRouterTokenSegmentsNav: Operator to filter by router navigation with token segment checks (E.g
page/:token_segment
) for using with effects. - selectRouterNav: Operator to select current router state navigation (NgRx selector equivalent).
Contributions
Pull requests or issues are very appreciated.
License
MIT license
© 2019 Jose Quintana