v7 - Angular 5+ Support (angular-redux#482)

* Upgrade Angular dependencies to v5 * Upgrade RxJS * Refactor to use `lettable` operators
ztukaz · Nov 17, 2017 · b4a036a · b4a036a
1 parent e032e4b
commit b4a036a
Show file tree

Hide file tree

Showing 12 changed files with 805 additions and 567 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+# 7.0.0 - Angular 5 Upgrade
+
+* Update dependencies to Angular 5 
+* Update RxJS to 5.5.2 and use lettable operators 
+* Update peer dependencies to only Angular 5+
+
+note: This version requires Angular 5, the code generated by the compiler is not compatible with Angular v4.
+
+
 # 6.6.0-1
 
 * Update peer dependency to include Angular 5, *note* - this is a beta release, if you run into any issues with Angular 5 please let me know. This release is still using an older version of angular to build / compile, but seems to work with Angular 5.

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@angular-redux/store",
-  "version": "6.6.0-1",
-  "description": "Angular 2 bindings for Redux",
+  "version": "7.0.0-3",
+  "description": "Angular bindings for Redux",
   "main": "./lib/src/index.js",
   "scripts": {
     "prebuild": "rimraf ./lib",
@@ -53,35 +53,35 @@
   },
   "homepage": "https://github.com/angular-redux/store#readme",
   "devDependencies": {
-    "@angular/animations": "^4.1.0",
-    "@angular/common": "^4.1.0",
-    "@angular/compiler": "^4.1.0",
-    "@angular/compiler-cli": "^4.1.0",
-    "@angular/core": "^4.1.0",
-    "@angular/http": "^4.1.0",
-    "@angular/platform-browser": "^4.1.0",
-    "@angular/platform-browser-dynamic": "^4.1.0",
-    "@angular/platform-server": "^4.1.0",
+    "@angular/animations": "^5.0.1",
+    "@angular/common": "^5.0.1",
+    "@angular/compiler": "^5.0.1",
+    "@angular/compiler-cli": "^5.0.1",
+    "@angular/core": "^5.0.1",
+    "@angular/http": "^5.0.1",
+    "@angular/platform-browser": "^5.0.1",
+    "@angular/platform-browser-dynamic": "^5.0.1",
+    "@angular/platform-server": "^5.0.1",
     "@types/jasmine": "2.5.38",
     "@types/node": "^6.0.36",
     "core-js": "^2.4.1",
     "jasmine": "^2.5.3",
     "nodemon": "^1.11.0",
     "nyc": "^10.2.0",
-    "redux": "^3.5.0",
-    "reflect-metadata": "^0.1.10",
+    "redux": "^3.7.2",
+    "reflect-metadata": "0.1.10",
     "rimraf": "^2.5.2",
-    "rxjs": "^5.0.1",
+    "rxjs": "^5.5.2",
     "symbol-observable": "^1.0.1",
     "ts-node": "^3.3.0",
     "tsconfig-paths": "^2.3.0",
-    "tslint": "^5.1.0",
+    "tslint": "^5.8.0",
     "typedoc": "^0.9.0",
-    "typescript": "^2.4.1",
+    "typescript": "2.4.2",
     "zone.js": "^0.8.18"
   },
   "peerDependencies": {
-    "@angular/core": "^2.4.0 || ^4.0.0 || ^5.0.0",
+    "@angular/core": "^5.0.0",
     "redux": "^3.5.0"
   },
   "nyc": {

diff --git a/src/components/root-store.ts b/src/components/root-store.ts
@@ -8,19 +8,24 @@ import {
   createStore,
   applyMiddleware,
   compose,
-  Dispatch,
+  Dispatch
 } from 'redux';
 
 import { NgZone } from '@angular/core';
 import { Observer } from 'rxjs/Observer';
 import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/switchMap';
+import { map } from 'rxjs/operators/map';
+import { filter } from 'rxjs/operators/filter';
+import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged';
+import { switchMap } from 'rxjs/operators/switchMap';
 import { NgRedux } from './ng-redux';
-import { Selector, PathSelector, Comparator, resolveToFunctionSelector } from './selectors';
+import {
+  Selector,
+  PathSelector,
+  Comparator,
+  resolveToFunctionSelector
+} from './selectors';
 import { assert } from '../utils/assert';
 import { SubStore } from './sub-store';
 import { enableFractalReducers } from './fractal-reducer-map';
@@ -34,24 +39,27 @@ export class RootStore<RootState> extends NgRedux<RootState> {
   constructor(private ngZone: NgZone) {
     super();
     NgRedux.instance = this;
-    this._store$ = new BehaviorSubject<RootState | undefined>(undefined)
-      .filter(n => n !== undefined)
-      .switchMap(observableStore => observableStore as any) as BehaviorSubject<RootState>;
+    this._store$ = new BehaviorSubject<RootState | undefined>(undefined).pipe(
+      filter(n => n !== undefined),
+      switchMap(observableStore => observableStore as any)
+    ) as BehaviorSubject<RootState>; // TODO: fix this? needing to explicitly cast this is wrong
   }
 
   configureStore = (
     rootReducer: Reducer<RootState>,
     initState: RootState,
     middleware: Middleware[] = [],
-    enhancers: StoreEnhancer<RootState>[] = []): void => {
+    enhancers: StoreEnhancer<RootState>[] = []
+  ): void => {
     assert(!this._store, 'Store already configured!');
 
     // Variable-arity compose in typescript FTW.
     this.setStore(
-      compose.apply(null,
-        [applyMiddleware(...middleware), ...enhancers])(createStore)
-        (enableFractalReducers(rootReducer), initState));
-  }
+      compose.apply(null, [applyMiddleware(...middleware), ...enhancers])(
+        createStore
+      )(enableFractalReducers(rootReducer), initState)
+    );
+  };
 
   provideStore = (store: Store<RootState>) => {
     assert(!this._store, 'Store already configured!');
@@ -64,15 +72,16 @@ export class RootStore<RootState> extends NgRedux<RootState> {
     this._store.subscribe(listener);
 
   replaceReducer = (nextReducer: Reducer<RootState>): void => {
-    this._store.replaceReducer(nextReducer)
-  }
+    this._store.replaceReducer(nextReducer);
+  };
 
-  dispatch: Dispatch<RootState> = (action: Action) => {
+  dispatch: Dispatch<RootState> = <A extends Action>(action: A): A => {
     assert(
       !!this._store,
       'Dispatch failed: did you forget to configure your store? ' +
-      'https://github.com/angular-redux/@angular-redux/core/blob/master/' +
-      'README.md#quick-start');
+        'https://github.com/angular-redux/@angular-redux/core/blob/master/' +
+        'README.md#quick-start'
+    );
 
     if (!NgZone.isInAngularZone()) {
       return this.ngZone.run(() => this._store.dispatch(action));
@@ -81,17 +90,20 @@ export class RootStore<RootState> extends NgRedux<RootState> {
     }
   };
 
-  select = <S>(
-    selector?: Selector<RootState, S>,
-    comparator?: Comparator): Observable<S> =>
-    this._store$
-      .distinctUntilChanged()
-      .map(resolveToFunctionSelector(selector))
-      .distinctUntilChanged(comparator);
+  select = <SelectedType>(
+    selector?: Selector<RootState, SelectedType>,
+    comparator?: Comparator
+  ): Observable<SelectedType> =>
+    this._store$.pipe(
+      distinctUntilChanged(),
+      map(resolveToFunctionSelector(selector)),
+      distinctUntilChanged(comparator)
+    );
 
   configureSubStore = <SubState>(
     basePath: PathSelector,
-    localReducer: Reducer<SubState>): ObservableStore<SubState> =>
+    localReducer: Reducer<SubState>
+  ): ObservableStore<SubState> =>
     new SubStore<SubState>(this, basePath, localReducer);
 
   private setStore(store: Store<RootState>) {
@@ -100,13 +112,17 @@ export class RootStore<RootState> extends NgRedux<RootState> {
     this._store$.next(storeServable as any);
   }
 
-  private storeToObservable = (store: Store<RootState>): Observable<RootState> =>
+  private storeToObservable = (
+    store: Store<RootState>
+  ): Observable<RootState> =>
     new Observable<RootState>((observer: Observer<RootState>) => {
       observer.next(store.getState());
-      const unsubscribeFromRedux = store.subscribe(() => observer.next(store.getState()));
+      const unsubscribeFromRedux = store.subscribe(() =>
+        observer.next(store.getState())
+      );
       return () => {
         unsubscribeFromRedux();
         observer.complete();
       };
     });
-};
+}
diff --git a/src/components/sub-store.ts b/src/components/sub-store.ts
@@ -1,56 +1,66 @@
 import { Dispatch, Reducer } from 'redux';
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/distinctUntilChanged';
+import { map } from 'rxjs/operators/map';
+import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged';
 
 import { getIn } from '../utils/get-in';
 import {
   PathSelector,
   Selector,
   Comparator,
-  resolveToFunctionSelector,
+  resolveToFunctionSelector
 } from './selectors';
 import { NgRedux } from './ng-redux';
-import { ObservableStore, } from './observable-store';
-import { registerFractalReducer, replaceLocalReducer } from './fractal-reducer-map';
+import { ObservableStore } from './observable-store';
+import {
+  registerFractalReducer,
+  replaceLocalReducer
+} from './fractal-reducer-map';
 
 /** @hidden */
 export class SubStore<State> implements ObservableStore<State> {
   constructor(
     private rootStore: NgRedux<any>,
     private basePath: PathSelector,
-    localReducer: Reducer<State>) {
-      registerFractalReducer(basePath, localReducer);
+    localReducer: Reducer<State>
+  ) {
+    registerFractalReducer(basePath, localReducer);
   }
 
   dispatch: Dispatch<State> = action =>
     this.rootStore.dispatch(
-      Object.assign({},
-      action,
-      { '@angular-redux::fractalkey': JSON.stringify(this.basePath) }))
+      Object.assign({}, action, {
+        '@angular-redux::fractalkey': JSON.stringify(this.basePath)
+      })
+    );
 
-  getState = (): State =>
-    getIn(this.rootStore.getState(), this.basePath)
+  getState = (): State => getIn(this.rootStore.getState(), this.basePath);
 
   configureSubStore = <SubState>(
     basePath: PathSelector,
-    localReducer: Reducer<SubState>): ObservableStore<SubState> =>
-      new SubStore<SubState>(
-        this.rootStore,
-        [ ...this.basePath, ...basePath],
-        localReducer)
+    localReducer: Reducer<SubState>
+  ): ObservableStore<SubState> =>
+    new SubStore<SubState>(
+      this.rootStore,
+      [...this.basePath, ...basePath],
+      localReducer
+    );
 
   select = <SelectedState>(
     selector?: Selector<State, SelectedState>,
-    comparator?: Comparator): Observable<SelectedState> => this.rootStore
+    comparator?: Comparator
+  ): Observable<SelectedState> =>
+    this.rootStore
       .select(this.basePath)
-      .map(resolveToFunctionSelector(selector))
-      .distinctUntilChanged(comparator)
+      .pipe(
+        map(resolveToFunctionSelector(selector)),
+        distinctUntilChanged(comparator)
+      );
 
-  subscribe = (listener: () => void): () => void => {
+  subscribe = (listener: () => void): (() => void) => {
     const subscription = this.select().subscribe(listener);
     return () => subscription.unsubscribe();
-  }
+  };
 
   replaceReducer = (nextLocalReducer: Reducer<State>) =>
     replaceLocalReducer(this.basePath, nextLocalReducer);