@angular-redux/router

@angular-redux/router

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

Setup

• Use npm to install the bindings:

npm install @angular-redux/router --save

• Use the routerReducer when providing Store:

import { combineReducers } from 'redux';
import { routerReducer } from '@angular-redux/router';

export default combineReducers<IAppState>({
  // your reducers..
  router: routerReducer,
});

• 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..
})
export class AppModule {
  constructor(ngRedux: NgRedux<IAppState>, ngReduxRouter: NgReduxRouter) {
    ngRedux.configureStore(/* args */);
    ngReduxRouter.initialize(/* args */);
  }
}

What if I use Immutable.js with my Redux store?

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

• Provide your own reducer function that will receive actions of type UPDATE_LOCATION and return the payload merged into state.
• Pass a selector to access the payload state and convert it to a JS object via the selectLocationFromState option on NgReduxRouter's initialize().

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

What if I have a different way of supplying the current URL of the page?

Depending on your app's needs. It may need to supply the current URL of the page differently than directly through the router. This can be achieved by initializing the bindings with a second argument: urlState$. The urlState$ argument lets you give NgReduxRouter an Observable<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, and getting the URL from there.

Examples

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

Changelog

10.0.0 (2019-05-04)

Bug Fixes

• ci: fix canary release not working with yarn (#62) (90564d3)
• canary release auto approve (#80) (e888aa5)

chore

• build: use ng-packagr (#37) (dffe23a), closes #9
• linting: add global tslint rules (#35) (336cc60), closes #4

Features

• add new devtools window prop name (#58) (55b15a6)
• upgrade to angular 7 (#72) (18d9245), closes #65 #66 #67 #68 #69 #70 #71 #74 #79

BREAKING CHANGES

• Upgrades Angular dependencies to v7
• build: - changes the output to conform to the Angular Package Format. This may cause subtle differences in consumption behaviour

• peer dependencies have been corrected to actual dependencies

• linting: - ConnectArray has been renamed to ConnectArrayDirective

• ReactiveConnect has been renamed to ReactiveConnectDirective
• Connect has been renamed to ConnectDirective
• interfaces with an "I" prefix have had that prefix removed (e.g "IAppStore" -> "AppStore")