Angular 2, @ngrx/store, @ngrx/devtools : bind actions by subscribing to the router?

I’m using on a project using Angular 2 and @ngrx/store. I also use @ngrx/devtools to debug and help me work with this redux implementation.

I would like bind the angular’s router with the ngrx’s store. So I’ll be able to update current route by dispatching an action.


This is what I’ve done (it works but this is not what I want) :

// imports
// ....
// @Component
// ....

    { path: '/home',    name: 'Home',   component: HomeComponent,   useAsDefault: true },
    { path: '/medias',  name: 'Medias', component: MediasComponent }
export class MainComponent {
    constructor (private _router:Router, private _store:Store<AppStore>) {
        _router.subscribe(url => _store.dispatch(changeUrl(url)));

changeUrl is an action creator.

So when Angular detects a route update an action is dispatched and my state is updating.

And it works well ! Using @ngrx/devtools, I can see the actions correctly dispatched, the store is updated but.. This is the opposite of what I want because angular do the job and update redux. So if I rollback an action, my view is not updated.

It’s simple !

“All what I have to do is to dispatch an action when click on a nav link inside the action creator, redirect using Angular’s methods.”

Yep. But no, I think it’s not a good way to go because of :

  • <a [routerLink]="routeName">Link</a> provided by Angular becomes useless.
  • It seems difficult to use Angular’s DI to inject the Router inside my actions creator because actions creators are basically functions. Not angular’s components.

What to do ?

This is the question. I don’t really know how to bind Angular’s router & @ngrx/store correctly.

Leave a Reply

Notify of