@studiohyperdrive/ng-redux-router

Angular Redux Router

Sync Angular Router state with the Redux app state, gaining easy access to the entire route, not just the activated route.

Dependencies

• @angular/router

Installation

npm install @studiohyperdrive/ng-redux-router --save

or

yarn add @studiohyperdrive/ng-redux-router

Import module in app.module.ts:

import { ReduxRouterModule } from '@studiohyperdrive/ng-redux-router';

@NgModule({
    imports: [
        ReduxRouterModule
    ]
})

export class AppModule {}

Initialize ReduxRouter with a dispatch function (e.g. using the @angular-redux/store package:

constructor(
    private ngRedux: NgRedux<MyAppState>,
    private reduxRouter: ReduxRouter
) {
    reduxRouter.initialize(ngRedux.dispatch);
}

You can find examples for a vanilla implementation, angular-redux and ngrx in the examples folder. All examples can be run using the angular-cli.

Usage

The ReduxRouter will listen for route changes and store the current, previous and active (pending) route for the entire route tree in the state (i.e. from the root, not just the parts applicable for the component context).

The following properties are stored for each route:

• url: the complete path including queryParams & fragments
• path: the url path without queryParams & fragments
• frament: the current active fragment
• query: all queryParams found on the route
• params: all route params found on the route

The ROUTE_UPDATE action will only be dispatched once the NavigationEnd event is triggered.

Known issues

• The angular-redux package is not actively maintained anymore but still works fine, if you lock your redux version to 4.0.1. There are some type issues in newer versions.
• When using replaceUrl when navigating, the route is not updated correctly.