04-selectors complete

Author: brandonroberts

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

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

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

@@ -15,17 +15,15 @@ import { BooksPageActions } from '../../actions';
 })
 export class BooksPageComponent implements OnInit {
   books$: Observable<Book[]>;
-  currentBook: Book;
-  total: number;
+  currentBook$: Observable<Book>;
+  total$: Observable<number>;
 
   constructor(
     private store: Store<fromRoot.State>
   ) {
-    this.books$ = this.store.pipe(
-      select(state => state.books),
-      map((booksState: any) => booksState.ids.map(id => booksState.entities[id])),
-      tap(books => this.updateTotals(books))
-    );
+    this.books$ = this.store.pipe(select(fromRoot.selectAllBooks));
+    this.currentBook$ = this.store.pipe(select(fromRoot.selectActiveBook));
+    this.total$ = this.store.pipe(select(fromRoot.selectBookEarningsTotals));
   }
 
   ngOnInit() {
@@ -37,15 +35,8 @@ export class BooksPageComponent implements OnInit {
     this.store.dispatch(new BooksPageActions.Enter());
   }
 
-  updateTotals(books: Book[]) {
-    this.total = books.reduce((total, book) => {
-      return total + parseInt(`${book.earnings}`, 10) || 0;
-    }, 0);
-  }
-
   onSelect(book: Book) {
     this.store.dispatch(new BooksPageActions.SelectBook(book.id));
-    this.currentBook = book;
   }
 
   onCancel() {
@@ -54,7 +45,6 @@ export class BooksPageComponent implements OnInit {
 
   removeSelectedBook() {
     this.store.dispatch(new BooksPageActions.ClearSelectedBook());
-    this.currentBook = null;
   }  
 
   onSave(book: Book) {

src/app/shared/state/books.reducer.ts

@@ -63,3 +63,5 @@ export function reducer(state = initialState, action: BooksPageActions.BooksActi
   }
 }
 
+export const { selectAll, selectEntities } = adapter.getSelectors();
+export const activeBookId = (state: State) => state.activeBookId;

src/app/shared/state/index.ts

@@ -44,3 +44,33 @@ export const selectMoviesEarningsTotal = createSelector(
   selectMovies,
   movies => movies.reduce((total, movie) => total + parseInt(`${movie.earnings}`, 10) || 0, 0)
 );
+
+export const selectBooksState = (state: State) => state.books;
+
+export const selectActiveBookId = createSelector(
+  selectBooksState,
+  fromBooks.activeBookId
+);
+
+export const selectAllBooks = createSelector(
+  selectBooksState,
+  fromBooks.selectAll
+);
+
+export const selectAllBooksEntities = createSelector(
+  selectBooksState,
+  fromBooks.selectEntities
+);
+
+export const selectActiveBook = createSelector(
+  selectAllBooksEntities,
+  selectActiveBookId,
+  (entities, bookId) => bookId ? entities[bookId] : null
+);
+
+export const selectBookEarningsTotals = createSelector(
+  selectAllBooks,
+  books => books.reduce((total, book) => {
+    return total + parseInt(`${book.earnings}`, 10) || 0;
+  }, 0)
+)