09-effects

Author: MikeRyanDev

Diff for: src/app/books/books-api.effects.ts

@@ -0,0 +1,22 @@
+import { Injectable } from "@angular/core";
+import { Effect, Actions, ofType } from "@ngrx/effects";
+import { mergeMap, map, catchError } from "rxjs/operators";
+import { EMPTY } from "rxjs";
+import { BooksService } from "../shared/services/book.service";
+import { BooksPageActions, BooksApiActions } from "./actions";
+
+@Injectable()
+export class BooksApiEffects {
+  @Effect()
+  loadBooks$ = this.actions$.pipe(
+    ofType(BooksPageActions.enter),
+    mergeMap(() =>
+      this.booksService.all().pipe(
+        map(books => BooksApiActions.booksLoaded({ books })),
+        catchError(() => EMPTY)
+      )
+    )
+  );
+
+  constructor(private booksService: BooksService, private actions$: Actions) {}
+}

Diff for: src/app/books/books.module.ts

@@ -2,18 +2,21 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
 import { ReactiveFormsModule } from "@angular/forms";
+import { EffectsModule } from "@ngrx/effects";
 import { MaterialModule } from "src/app/material.module";
 import { BooksPageComponent } from "./components/books-page/books-page.component";
 import { BookDetailComponent } from "./components/book-detail/book-detail.component";
 import { BooksListComponent } from "./components/books-list/books-list.component";
 import { BooksTotalComponent } from "./components/books-total/books-total.component";
+import { BooksApiEffects } from "./books-api.effects";
 
 @NgModule({
   imports: [
     CommonModule,
     ReactiveFormsModule,
     MaterialModule,
-    RouterModule.forChild([{ path: "books", component: BooksPageComponent }])
+    RouterModule.forChild([{ path: "books", component: BooksPageComponent }]),
+    EffectsModule.forFeature([BooksApiEffects])
   ],
   declarations: [
     BooksPageComponent,

Diff for: src/app/books/components/books-page/books-page.component.ts

@@ -29,14 +29,6 @@ export class BooksPageComponent implements OnInit {
 
   ngOnInit() {
     this.store.dispatch(BooksPageActions.enter());
-
-    this.getBooks();
-  }
-
-  getBooks() {
-    this.booksService.all().subscribe(books => {
-      this.store.dispatch(BooksApiActions.booksLoaded({ books }));
-    });
   }
 
   onSelect(book: BookModel) {
@@ -63,7 +55,6 @@ export class BooksPageComponent implements OnInit {
     this.store.dispatch(BooksPageActions.createBook({ book: bookProps }));
 
     this.booksService.create(bookProps).subscribe(book => {
-      this.getBooks();
       this.removeSelectedBook();
 
       this.store.dispatch(BooksApiActions.bookCreated({ book }));
@@ -84,7 +75,6 @@ export class BooksPageComponent implements OnInit {
     this.store.dispatch(BooksPageActions.deleteBook({ bookId: book.id }));
 
     this.booksService.delete(book.id).subscribe(() => {
-      this.getBooks();
       this.removeSelectedBook();
 
       this.store.dispatch(BooksApiActions.bookDeleted({ bookId: book.id }));