This repository has been archived by the owner on Jul 27, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(router-store): Provide bindings to connect @angular/router
With the deprecation of `@ngrx/router`, this library will provide bindings to connect `@angular/router` to `@ngrx/store`.
BREAKING CHANGE:
Router API has changed internally
BEFORE:
Use the `routerReducer` when providing `Store`:
```ts
import { provideStore } from '@ngrx/store';
import { routerReducer } from '@ngrx/router-store';
export const storeProvider = provideStore({
// Your reducers go here,
router: routerReducer
});
```
Install the bindings providers after you setup the router providers:
```ts
import { connectRouterToStore } from '@ngrx/router-store';
bootstrap(App, [
storeProvider,
provideRouter(routes),
connectRouterToStore()
]);
```
AFTER:
Use the `routerReducer` when providing the `StoreModule.provideStore` and add the `RouterStoreModule.connectRouter()` to the `@NgModule.imports`:
```ts
import { StoreModule } from '@ngrx/store';
import { routerReducer, RouterStoreModule } from '@ngrx/router-store';
@NgModule({
imports: [
BrowserModule,
StoreModule.provideStore({ router: routerReducer }),
RouterStoreModule.connectRouter()
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
```
BEFORE:
```ts
import {routerActions} from '@ngrx/store';
store.dispatch(routerActions.go('/path', 'query=string'));
store.dispatch(routerActions.replace('/path', 'query=string'));
store.dispatch(routerActions.search('query=string'));
```
AFTER:
```ts
import {routerActions} from '@ngrx/store';
store.dispatch(routerActions.go('/path', { query: 'string' ));
store.dispatch(routerActions.replace('/path', { query: 'string' ));
store.dispatch(routerActions.search({ query: 'string' ));
```
Closes #3- Loading branch information
1 parent
fac115b
commit 2af0ed4
Showing
14 changed files
with
206 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,79 @@ | ||
| import 'rxjs/add/operator/do'; | ||
| import 'rxjs/add/operator/filter'; | ||
| import 'rxjs/add/operator/distinctUntilChanged'; | ||
| import 'rxjs/add/operator/map'; | ||
| import { Router, LocationChange } from '@ngrx/router'; | ||
| import { Action, Dispatcher, Store } from '@ngrx/store'; | ||
| import 'rxjs/add/operator/withLatestFrom'; | ||
| import '@ngrx/core/add/operator/select'; | ||
| import { Router, Event, NavigationEnd } from '@angular/router'; | ||
| import { Location } from '@angular/common'; | ||
| import { Store, Action } from '@ngrx/store'; | ||
| import { Observable } from 'rxjs/Observable'; | ||
| import { Observer } from 'rxjs/Observer'; | ||
|
|
||
| import { RouterState } from './reducer'; | ||
| import { RouterMethodCall, routerActions, routerActionTypes } from './actions'; | ||
|
|
||
| export function projectLocationChanges(state$: Observable<{ router: RouterState }>): Observable<LocationChange> { | ||
| return state$.map(s => s.router).filter(change => change !== null); | ||
| } | ||
|
|
||
| export function listenForRouterMethodActions(router: Router, actions$: Observable<Action>) { | ||
| export function listenForRouterMethodActions(router: Router, location: Location, actions$: Observable<Action>) { | ||
| actions$ | ||
| .filter(action => routerActionTypes.indexOf(action.type) > -1) | ||
| .subscribe(action => { | ||
| const { path, query }: RouterMethodCall = action.payload; | ||
| const { path, query: queryParams }: RouterMethodCall = action.payload; | ||
| let commands: any[] = [path]; | ||
|
|
||
| switch (action.type) { | ||
| case routerActions.GO: | ||
| router.go(path, query); | ||
| router.navigate(commands, { queryParams }); | ||
| break; | ||
|
|
||
| case routerActions.REPLACE: | ||
| router.replace(path, query); | ||
| router.navigate(commands, { queryParams, replaceUrl: true }); | ||
| break; | ||
|
|
||
| case routerActions.SEARCH: | ||
| router.search(query); | ||
| let url = router.url; | ||
| let command = url.split(/\?/)[0]; | ||
| router.navigate([command], { queryParams }); | ||
| break; | ||
|
|
||
| case routerActions.SHOW: | ||
| router.navigate(commands, { queryParams, skipLocationChange: true }); | ||
| break; | ||
|
|
||
| case routerActions.BACK: | ||
| router.back(); | ||
| location.back(); | ||
| break; | ||
|
|
||
| case routerActions.FORWARD: | ||
| router.forward(); | ||
| location.forward(); | ||
| break; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| export function connectRouterActions(router: Observable<LocationChange>, store: Observer<Action>) { | ||
| router | ||
| .map(change => ({ type: routerActions.UPDATE_LOCATION, payload: change })) | ||
| export function selectRouter(store: Store<any>) { | ||
| return store.select(state => state.router); | ||
| } | ||
|
|
||
| export function getLatestUrl(router: Router): Observable<string> { | ||
| return router | ||
| .events | ||
| .filter((event: Event) => event instanceof NavigationEnd) | ||
| .map(() => router.url) | ||
| .distinctUntilChanged(); | ||
| } | ||
|
|
||
| export function connectRouterActions(router: Router, store: Store<any>) { | ||
| getLatestUrl(router) | ||
| .withLatestFrom(selectRouter(store)) | ||
| .filter(([url, rs]) => (rs && rs.path !== url) || !rs) | ||
| .map(([path]) => ({ type: routerActions.UPDATE_LOCATION, payload: { path } })) | ||
| .subscribe(store); | ||
| } | ||
|
|
||
| export function listenForStoreChanges(router: Router, store: Store<any>) { | ||
| selectRouter(store) | ||
| .withLatestFrom(getLatestUrl(router)) | ||
| .filter(([rs, url]) => rs.path !== url) | ||
| .map(([rs]) => rs.path) | ||
| .do(url => router.navigateByUrl(url)) | ||
| .subscribe(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { NgModule, APP_BOOTSTRAP_LISTENER, OpaqueToken } from '@angular/core'; | ||
| import { Location } from '@angular/common'; | ||
| import { Router } from '@angular/router'; | ||
| import { Dispatcher, Store, Action } from '@ngrx/store'; | ||
| import { Observable } from 'rxjs/Observable'; | ||
|
|
||
| import { | ||
| listenForRouterMethodActions, | ||
| connectRouterActions, | ||
| listenForStoreChanges | ||
| } from './connect'; | ||
|
|
||
| export function setupRouterStore( | ||
| router: Router, | ||
| location: Location, | ||
| dispatcher: Observable<Action>, | ||
| store: Store<any> | ||
| ) { | ||
| return () => { | ||
| listenForRouterMethodActions(router, location, dispatcher); | ||
| connectRouterActions(router, store); | ||
| listenForStoreChanges(router, store); | ||
| }; | ||
| } | ||
|
|
||
| export function provideRouterConnector() { | ||
| return { | ||
| provide: APP_BOOTSTRAP_LISTENER, | ||
| deps: [ Router, Location, Dispatcher, Store ], | ||
| useFactory: setupRouterStore, | ||
| multi: true | ||
| }; | ||
| } | ||
|
|
||
| @NgModule() | ||
| export class RouterStoreModule { | ||
| static connectRouter() { | ||
| return { | ||
| ngModule: RouterStoreModule, | ||
| providers: [ | ||
| provideRouterConnector() | ||
| ] | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.