08-reading-state

Author: MikeRyanDev

src/app/books/components/books-page/books-page.component.html

@@ -1,9 +1,9 @@
 <div class="container">
   <div class="col-50">
-    <app-books-total [total]="total"> </app-books-total>
+    <app-books-total [total]="total$ | async"> </app-books-total>
 
     <app-books-list
-      [books]="books"
+      [books]="books$ | async"
       (select)="onSelect($event)"
       (delete)="onDelete($event)"
     >
@@ -12,7 +12,7 @@
 
   <app-book-detail
     class="col-50"
-    [book]="currentBook"
+    [book]="currentBook$ | async"
     (save)="onSave($event)"
     (cancel)="onCancel()"
   >

src/app/books/components/books-page/books-page.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit } from "@angular/core";
 import { Store } from "@ngrx/store";
-import { State } from "src/app/shared/state";
+import { Observable } from "rxjs";
 import {
-  BookModel,
-  calculateBooksGrossEarnings,
-  BookRequiredProps
-} from "src/app/shared/models/book.model";
+  State,
+  selectAllBooks,
+  selectActiveBook,
+  selectBooksEarningsTotals
+} from "src/app/shared/state";
+import { BookModel, BookRequiredProps } from "src/app/shared/models/book.model";
 import { BooksService } from "src/app/shared/services/book.service";
 import { BooksPageActions, BooksApiActions } from "../../actions";
 
@@ -15,39 +17,30 @@ import { BooksPageActions, BooksApiActions } from "../../actions";
   styleUrls: ["./books-page.component.css"]
 })
 export class BooksPageComponent implements OnInit {
-  books: BookModel[] = [];
-  currentBook: BookModel | null = null;
-  total: number = 0;
-
-  constructor(
-    private booksService: BooksService,
-    private store: Store<State>
-  ) {}
+  books$: Observable<BookModel[]>;
+  currentBook$: Observable<BookModel | null>;
+  total$: Observable<number>;
+
+  constructor(private booksService: BooksService, private store: Store<State>) {
+    this.books$ = store.select(selectAllBooks);
+    this.currentBook$ = store.select(selectActiveBook);
+    this.total$ = store.select(selectBooksEarningsTotals);
+  }
 
   ngOnInit() {
     this.store.dispatch(BooksPageActions.enter());
 
     this.getBooks();
-    this.removeSelectedBook();
   }
 
   getBooks() {
     this.booksService.all().subscribe(books => {
-      this.books = books;
-      this.updateTotals(books);
-
       this.store.dispatch(BooksApiActions.booksLoaded({ books }));
     });
   }
 
-  updateTotals(books: BookModel[]) {
-    this.total = calculateBooksGrossEarnings(books);
-  }
-
   onSelect(book: BookModel) {
     this.store.dispatch(BooksPageActions.selectBook({ bookId: book.id }));
-
-    this.currentBook = book;
   }
 
   onCancel() {
@@ -56,8 +49,6 @@ export class BooksPageComponent implements OnInit {
 
   removeSelectedBook() {
     this.store.dispatch(BooksPageActions.clearSelectedBook());
-
-    this.currentBook = null;
   }
 
   onSave(book: BookRequiredProps | BookModel) {
@@ -85,9 +76,6 @@ export class BooksPageComponent implements OnInit {
     );
 
     this.booksService.update(book.id, book).subscribe(book => {
-      this.getBooks();
-      this.removeSelectedBook();
-
       this.store.dispatch(BooksApiActions.bookUpdated({ book }));
     });
   }