Repository files navigation

Please note that this repo has been deprecated. Code and issues are being migrated to a monorepo athttps://github.com/angular-redux/platform where we are beginning work on a new and improved v10. To file any new issues or see the state of the current code base, we would love to see you there! Thanks for your support!

Bindings to connect @angular/router to @angular-redux/core

For use with Angular 6: Use v9.

For use with Angular 5: Use v7.

For use with Angular 2-4: Use v6.

1. Use npm to install the bindings:

npm install @angular-redux/router --save

2. Use therouterReducer when providingStore:

import{combineReducers}from'redux';import{routerReducer}from'@angular-redux/router';exportdefaultcombineReducers<IAppState>({// your reducers..router:routerReducer});

3. Add the bindings to your root module.

import{NgModule}from'@angular/core';import{NgReduxModule,NgRedux}from'@angular-redux/core';import{NgReduxRouterModule,NgReduxRouter}from'@angular-redux/router';import{RouterModule}from'@angular/router';import{routes}from'./routes';@NgModule({imports:[RouterModule.forRoot(routes),NgReduxModule,NgReduxRouterModule.forRoot()// ...your imports],// Other stuff..})exportclassAppModule{constructor(ngRedux:NgRedux<IAppState>,ngReduxRouter:NgReduxRouter){ngRedux.configureStore(/* args */);ngReduxRouter.initialize(/* args */);}}

When using a wrapper for your store's state, such as Immutable.js, you will need to change two things from the standard setup:

1. Provide your own reducer function that will receive actions of typeUPDATE_LOCATION and return the payload merged into state.
2. Pass a selector to access the payload state and convert it to a JS object via theselectLocationFromState option onNgReduxRouter'sinitialize().

These two hooks will allow you to store the state that this library uses in whatever format or wrapper you would like.

Depending on your app's needs. It may need to supply the current URL of the page differently than directlythrough the router. This can be achieved by initializing the bindings with a second argument:urlState$.TheurlState$ argument lets you giveNgReduxRouter anObservable<string> of the current URL of the page.If this argument is not given to the bindings, it defaults to subscribing to the@angular/router's events, andgetting the URL from there.

• Example-app: An example of using @angular-redux/router along with the other companion packages.