Skip to content

Instantly share code, notes, and snippets.



Last active Nov 9, 2018
What would you like to do?
Angular ngrx-router-store Router Actions / Effects
/* tslint:disable:max-classes-per-file */
import {Action} from '@ngrx/store';
import {NavigationExtras} from '@angular/router';
export enum RouterActionTypes {
GO = '[router] Go',
BACK = '[router] Back',
FORWARD = '[router] Forward',
export class Go implements Action {
readonly type = RouterActionTypes.GO;
public path: any[],
public query?: object,
public extras?: NavigationExtras,
) {}
export class Back implements Action {
readonly type = RouterActionTypes.BACK;
export class Forward implements Action {
readonly type = RouterActionTypes.FORWARD;
export type RouterAction =
| Go
| Back
| Forward;
import {Location} from '@angular/common';
import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import 'rxjs/observable/empty';
import {ROUTER_NAVIGATION} from '@ngrx/router-store';
import {Actions, Effect, ofType} from '@ngrx/effects';
import {map, tap} from 'rxjs/operators';
import * as fromRouter from '../actions/router.actions';
export class RouterEffects {
private actions$: Actions,
private router: Router,
private location: Location,
) {}
@Effect({dispatch: false})
goEffect$ = this.actions$.pipe(
tap(({path, query: queryParams, extras}) =>
this.router.navigate(path, {queryParams, ...extras}),
@Effect({dispatch: false})
backEffect$ = this.actions$.pipe(
tap(() => this.location.back()),
@Effect({dispatch: false})
forwardEffect$ = this.actions$.pipe(
tap(() => this.location.forward()),
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment