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 @district01/ng-redux-router --save
Import component in app.module.ts:
import { ReduxRouterModule } from '@district01/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);
}
Usage
The ReduxRouter will listen for route changes and store the current, previous and active (pending) route in the state. 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.