04-selectors

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

@@ -1,6 +1,6 @@
 <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$ | async"
@@ -12,7 +12,7 @@
 
   <app-book-detail
     class="col-50"
-    [book]="currentBook"
+    [book]="activeBook$ | async"
     (save)="onSave($event)"
     (cancel)="onCancel()"
   >

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

@@ -15,17 +15,13 @@ import { BooksPageActions } from "../../actions";
 })
 export class BooksPageComponent implements OnInit {
   books$: Observable<Book[]>;
-  currentBook: Book;
-  total: number;
+  activeBook$: 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.activeBook$ = this.store.pipe(select(fromRoot.selectActiveBook));
+    this.total$ = this.store.pipe(select(fromRoot.selectBookEarningsTotals));
   }
 
   ngOnInit() {
@@ -37,15 +33,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 +43,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

@@ -1,6 +1,7 @@
 import { createEntityAdapter, EntityAdapter, EntityState } from "@ngrx/entity";
 import { Book } from "src/app/shared/models/book.model";
 import { BooksPageActions } from "src/app/books/actions";
+import { createSelector } from "@ngrx/store";
 
 export const initialBooks: Book[] = [
   {
@@ -72,3 +73,18 @@ export function reducer(
       return state;
   }
 }
+
+export const { selectAll, selectEntities } = adapter.getSelectors();
+export const selectActiveBookId = (state: State) => state.activeBookId;
+export const selectActiveBook = createSelector(
+  selectEntities,
+  selectActiveBookId,
+  (entities, bookId) => (bookId ? entities[bookId] : null)
+);
+export const selectEarningsTotals = createSelector(
+  selectAll,
+  books =>
+    books.reduce((total, book) => {
+      return total + parseInt(`${book.earnings}`, 10) || 0;
+    }, 0)
+);

src/app/shared/state/index.ts

@@ -43,3 +43,20 @@ export const selectMoviesEarningsTotal = createSelector(
   selectMovieState,
   fromMovies.selectEarningsTotal
 );
+
+export const selectBooksState = (state: State) => state.books;
+
+export const selectAllBooks = createSelector(
+  selectBooksState,
+  fromBooks.selectAll
+);
+
+export const selectActiveBook = createSelector(
+  selectBooksState,
+  fromBooks.selectActiveBook
+);
+
+export const selectBookEarningsTotals = createSelector(
+  selectBooksState,
+  fromBooks.selectEarningsTotals
+);