Use new decorator interface to fractal stores (#37)

Author: SethDavenport

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@angular-redux/form": "^6.3.0",
     "@angular-redux/router": "^6.3.0",
-    "@angular-redux/store": "6.4.5",
+    "@angular-redux/store": "6.5.0",
     "@angular/common": "^4.1.0",
     "@angular/compiler": "^4.1.0",
     "@angular/core": "^4.1.0",

src/app/animals/animal/component.ts

@@ -1,54 +1,43 @@
-import { Component, Input, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { NgRedux, dispatch, select, ObservableStore } from '@angular-redux/store';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { NgRedux, dispatch, select, select$, WithSubStore } from '@angular-redux/store';
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/combineLatest';
 
 import { IAppState } from '../../store/model';
 import { animalComponentReducer } from './reducers';
+import { IAnimal } from '../model';
+
+export const toSubTotal = (obs$: Observable<IAnimal>): Observable<number> =>
+  obs$.map(s => s.ticketPrice * s.tickets);
 
 /**
  * Fractal component example.
  */
+@WithSubStore({
+  basePathMethodName: 'getBasePath',
+  localReducer: animalComponentReducer,
+})
 @Component({
   selector: 'zoo-animal',
   templateUrl: './component.html',
   styleUrls: ['./component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AnimalComponent implements OnInit {
+export class AnimalComponent {
   static readonly ADD_TICKET = 'ADD_TICKET';
   static readonly REMOVE_TICKET = 'REMOVE_TICKET';
 
   @Input() key: string;
   @Input() animalType: string;
 
-  private subStore: ObservableStore<any>;
-
-  name$: Observable<string>;
-  numTickets$: Observable<number>;
-  ticketPrice$: Observable<number>;
-  subTotal$: Observable<number>;
-
-  constructor(private ngRedux: NgRedux<IAppState>) {}
-
-  addTicket = () => this.subStore.dispatch({ type: 'ADD_TICKET' });
-  removeTicket = () => this.subStore.dispatch({ type: 'REMOVE_TICKET' });
+  @select()                  readonly name$: Observable<string>;
+  @select('tickets')         readonly numTickets$: Observable<number>;
+  @select('ticketPrice')     readonly ticketPrice$: Observable<number>;
+  @select$(null, toSubTotal) readonly subTotal$: Observable<number>;
 
-  // Can't be done in the constructor because it relies on data from the
-  // inputs.
-  ngOnInit() {
-    this.subStore = this.ngRedux.configureSubStore<any>(
-      [this.animalType, 'items', this.key],
-      animalComponentReducer);
-    this.name$ = this.subStore.select('name');
-    this.numTickets$ = this.subStore.select(['tickets'])
-      .map(n => n || 0);
-    this.ticketPrice$ = this.subStore.select('ticketPrice')
-      .map(n => n || 1);
+  getBasePath = () => this.key ?
+    [ this.animalType, 'items', this.key ] :
+    null;
 
-    this.subTotal$ = Observable.combineLatest(
-      this.numTickets$,
-      this.ticketPrice$,
-      (num, price) => num * price);
-  }
+  @dispatch() addTicket = () => ({ type: 'ADD_TICKET' });
+  @dispatch() removeTicket = () => ({ type: 'REMOVE_TICKET' });
 }

src/app/animals/model.ts

@@ -11,6 +11,7 @@ export interface IAnimal {
   animalType: AnimalType;
   name: string;
   ticketPrice: number;
+  tickets: number;
 }
 
 export interface IAnimalList {
@@ -23,5 +24,6 @@ export const fromServer = (record: any): IAnimal => ({
   id: record.name.toLowerCase(),
   animalType: record.animalType,
   name: record.name,
-  ticketPrice: record.ticketPrice,
+  ticketPrice: record.ticketPrice || 0,
+  tickets: record.tickets || 0,
 });

yarn.lock

@@ -12,9 +12,9 @@
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/@angular-redux/router/-/router-6.3.0.tgz#0ece17ad5a4eb8a40f54d7e3a67e67598f03d2cd"
 
-"@angular-redux/store@^6.4.1":
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/@angular-redux/store/-/store-6.%3Cspan%20class="x x-first x-last">4.1.tgz#40c9f001a4f09a9caa02310341c702da13e8755b"
+"@angular-redux/store@6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@angular-redux/store/-/store-6.%3Cspan%20class="x x-first x-last">5.0.tgz#98b59867d6f1b577f8d20d8d43da981d60c7d5c5"
 
 "@angular/[email protected]":
   version "1.0.1"