Nervous Parrot Muttering

    ngrx-router
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    NGRX Router

    Router bindings for NGRX Effects. It allows you to bind to route activation to fetch data along with some common route actions such as go, back, foward.

    This is different from ngrx-router-store in the fact this doesn't actually add anything to your store, it just emits events.

    For more information, checkout this blog post.

    Getting Started

    To get started, lets install the package thru npm:

    npm i ngrx-router --S
    

    then include the effect in your module:

    import { RouterEffects } from 'ngrx-router';
     
    @NgModule({
        imports: [
            EffectsModule.forRoot([
                ...effects, // < Your other effects
                RouterEffects
            ]),
        ]
    })
    export class MyModule {}

    Bindings

    In an effect, you can do bind to route activations like:

    import { ofRoute, RouteNavigation } from 'ngrx-router';
     
    @Injectable()
    export class MyEffect {
        constructor(private update$: Actions) {}
     
        @Effect()
        navigate$ = this.update$.pipe(
            ofRoute('pizza/:id'),
            map((action: RouteNavigation) => action.payload.params.id),
            map(id => new LoadPizza(id))
        );
    }

    The operator ofRoute supports the following syntax:

    • a simple match against a string ofRoute('pizza/:id')
    • a match against an array of strings ofRoute(['pizza/:id', 'burger/:id', 'burgers'])
    • a match against a regular expression ofRoute(/pizza|burger/)

    Actions

    You can also do navigation events with this library.

    this.store.dispatch(new RouterGo({ path: ['pizza'] }))
    this.store.dispatch(new RouterBack())
    this.store.dispatch(new RouterForward())

    Data

    The RouteNavigation event also contains data which is defined in the Routes:

    RouterModule.forRoot([
      {
        path: 'example',
        component: DummyComponent,
        data: { message: 'hello' },
      }
    ])
    map((action: RouteNavigation) => action.payload.data.message),

    To get data aggregated from parent routes use the configuration parameter paramsInheritanceStrategy:

    RouterModule.forRoot(routes, { paramsInheritanceStrategy: 'always' });

    Install

    npm i ngrx-router

    DownloadsWeekly Downloads

    15

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    81.3 kB

    Total Files

    17

    Last publish

    Collaborators

    • amcdnl