10-more-effects

Author: MikeRyanDev

src/app/books/books-api.effects.ts

@@ -1,6 +1,12 @@
 import { Injectable } from "@angular/core";
 import { Effect, Actions, ofType } from "@ngrx/effects";
-import { mergeMap, map, catchError } from "rxjs/operators";
+import {
+  mergeMap,
+  map,
+  catchError,
+  exhaustMap,
+  concatMap
+} from "rxjs/operators";
 import { EMPTY } from "rxjs";
 import { BooksService } from "../shared/services/book.service";
 import { BooksPageActions, BooksApiActions } from "./actions";
@@ -10,13 +16,46 @@ export class BooksApiEffects {
   @Effect()
   loadBooks$ = this.actions$.pipe(
     ofType(BooksPageActions.enter),
-    mergeMap(() =>
+    exhaustMap(() =>
       this.booksService.all().pipe(
         map(books => BooksApiActions.booksLoaded({ books })),
         catchError(() => EMPTY)
       )
     )
   );
 
+  @Effect()
+  createBook$ = this.actions$.pipe(
+    ofType(BooksPageActions.createBook),
+    mergeMap(action =>
+      this.booksService.create(action.book).pipe(
+        map(book => BooksApiActions.bookCreated({ book })),
+        catchError(() => EMPTY)
+      )
+    )
+  );
+
+  @Effect()
+  updateBook$ = this.actions$.pipe(
+    ofType(BooksPageActions.updateBook),
+    concatMap(action =>
+      this.booksService.update(action.bookId, action.changes).pipe(
+        map(book => BooksApiActions.bookUpdated({ book })),
+        catchError(() => EMPTY)
+      )
+    )
+  );
+
+  @Effect()
+  deleteBook$ = this.actions$.pipe(
+    ofType(BooksPageActions.deleteBook),
+    mergeMap(action =>
+      this.booksService.delete(action.bookId).pipe(
+        map(() => BooksApiActions.bookDeleted({ bookId: action.bookId })),
+        catchError(() => EMPTY)
+      )
+    )
+  );
+
   constructor(private booksService: BooksService, private actions$: Actions) {}
 }

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

@@ -8,8 +8,7 @@ import {
   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";
+import { BooksPageActions } from "../../actions";
 
 @Component({
   selector: "app-books",
@@ -21,7 +20,7 @@ export class BooksPageComponent implements OnInit {
   currentBook$: Observable<BookModel | null>;
   total$: Observable<number>;
 
-  constructor(private booksService: BooksService, private store: Store<State>) {
+  constructor(private store: Store<State>) {
     this.books$ = store.select(selectAllBooks);
     this.currentBook$ = store.select(selectActiveBook);
     this.total$ = store.select(selectBooksEarningsTotals);
@@ -53,31 +52,15 @@ export class BooksPageComponent implements OnInit {
 
   saveBook(bookProps: BookRequiredProps) {
     this.store.dispatch(BooksPageActions.createBook({ book: bookProps }));
-
-    this.booksService.create(bookProps).subscribe(book => {
-      this.removeSelectedBook();
-
-      this.store.dispatch(BooksApiActions.bookCreated({ book }));
-    });
   }
 
   updateBook(book: BookModel) {
     this.store.dispatch(
       BooksPageActions.updateBook({ bookId: book.id, changes: book })
     );
-
-    this.booksService.update(book.id, book).subscribe(book => {
-      this.store.dispatch(BooksApiActions.bookUpdated({ book }));
-    });
   }
 
   onDelete(book: BookModel) {
     this.store.dispatch(BooksPageActions.deleteBook({ bookId: book.id }));
-
-    this.booksService.delete(book.id).subscribe(() => {
-      this.removeSelectedBook();
-
-      this.store.dispatch(BooksApiActions.bookDeleted({ bookId: book.id }));
-    });
   }
 }