10-more-effects

Author: MikeRyanDev

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

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