diff --git a/src/app/books/books-api.effects.ts b/src/app/books/books-api.effects.ts
index da0adf3..70a1035 100644
--- a/src/app/books/books-api.effects.ts
+++ b/src/app/books/books-api.effects.ts
@@ -1,6 +1,6 @@
 import { Injectable } from "@angular/core";
 import { createEffect, Actions, ofType } from "@ngrx/effects";
-import { mergeMap, map } from "rxjs/operators";
+import { mergeMap, map, exhaustMap, concatMap } from "rxjs/operators";
 import { BooksService } from "../shared/services";
 import { BooksPageActions, BooksApiActions } from "./actions";
 
@@ -11,11 +11,46 @@ export class BooksApiEffects {
   loadBooks$ = createEffect(() =>
     this.actions$.pipe(
       ofType(BooksPageActions.enter),
-      mergeMap(() =>
+      exhaustMap(() =>
         this.booksService
           .all()
           .pipe(map(books => BooksApiActions.booksLoaded({ books })))
       )
     )
   );
+
+  createBook$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(BooksPageActions.createBook),
+      concatMap(action =>
+        this.booksService
+          .create(action.book)
+          .pipe(map(book => BooksApiActions.bookCreated({ book })))
+      )
+    )
+  );
+
+  updateBook$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(BooksPageActions.updateBook),
+      concatMap(action =>
+        this.booksService
+          .update(action.bookId, action.changes)
+          .pipe(map(book => BooksApiActions.bookUpdated({ book })))
+      )
+    )
+  );
+
+  deleteBook$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(BooksPageActions.deleteBook),
+      mergeMap(action =>
+        this.booksService
+          .delete(action.bookId)
+          .pipe(
+            map(() => BooksApiActions.bookDeleted({ bookId: action.bookId }))
+          )
+      )
+    )
+  );
 }
diff --git a/src/app/books/components/books-page/books-page.component.ts b/src/app/books/components/books-page/books-page.component.ts
index 4a4cb99..e6a6caa 100755
--- a/src/app/books/components/books-page/books-page.component.ts
+++ b/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";
-import { BooksService } from "src/app/shared/services";
-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 }));
-    });
   }
 }