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.