06-advanced-effects

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

@@ -2,7 +2,10 @@ import { Book } from "src/app/shared/models/book.model";
 import { Action } from "@ngrx/store";
 
 export enum BooksApiActionTypes {
-  BooksLoaded = '[Books API] Books Loaded Success',
+  BooksLoaded = "[Books API] Books Loaded Success",
+  BookCreated = "[Books API] Book Created",
+  BookUpdated = "[Books API] Book Updated",
+  BookDeleted = "[Books API] Book Deleted"
 }
 
 export class BooksLoaded implements Action {
@@ -11,5 +14,26 @@ export class BooksLoaded implements Action {
   constructor(public books: Book[]) {}
 }
 
-export type BooksApiActions = 
-  | BooksLoaded;
+export class BookCreated implements Action {
+  readonly type = BooksApiActionTypes.BookCreated;
+
+  constructor(public book: Book) {}
+}
+
+export class BookUpdated implements Action {
+  readonly type = BooksApiActionTypes.BookUpdated;
+
+  constructor(public book: Book) {}
+}
+
+export class BookDeleted implements Action {
+  readonly type = BooksApiActionTypes.BookDeleted;
+
+  constructor(public book: Book) {}
+}
+
+export type BooksApiActions =
+  | BooksLoaded
+  | BookCreated
+  | BookUpdated
+  | BookDeleted;

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

@@ -2,22 +2,61 @@ import { Injectable } from "@angular/core";
 import { Effect, Actions, ofType } from "@ngrx/effects";
 import { BooksPageActions, BooksApiActions } from "./actions";
 import { BooksService } from "../shared/services/book.service";
-import { mergeMap, map, catchError } from "rxjs/operators";
+import {
+  mergeMap,
+  map,
+  catchError,
+  exhaustMap,
+  concatMap
+} from "rxjs/operators";
 import { EMPTY } from "rxjs";
 
 @Injectable()
 export class BooksApiEffects {
   @Effect()
   loadBooks$ = this.actions$.pipe(
     ofType(BooksPageActions.BooksActionTypes.Enter),
-    mergeMap(() =>
+    exhaustMap(() =>
       this.booksService.all().pipe(
         map(books => new BooksApiActions.BooksLoaded(books)),
         catchError(() => EMPTY)
       )
     )
   );
 
+  @Effect()
+  createBook$ = this.actions$.pipe(
+    ofType(BooksPageActions.BooksActionTypes.CreateBook),
+    concatMap(action =>
+      this.booksService.create(action.book).pipe(
+        map(book => new BooksApiActions.BookCreated(book)),
+        catchError(() => EMPTY)
+      )
+    )
+  );
+
+  @Effect()
+  updateBook$ = this.actions$.pipe(
+    ofType(BooksPageActions.BooksActionTypes.UpdateBook),
+    concatMap(action =>
+      this.booksService.update(action.book.id, action.book).pipe(
+        map(book => new BooksApiActions.BookUpdated(book)),
+        catchError(() => EMPTY)
+      )
+    )
+  );
+
+  @Effect()
+  deleteBook$ = this.actions$.pipe(
+    ofType(BooksPageActions.BooksActionTypes.DeleteBook),
+    mergeMap(action =>
+      this.booksService.delete(action.book.id).pipe(
+        map(() => new BooksApiActions.BookDeleted(action.book)),
+        catchError(() => EMPTY)
+      )
+    )
+  );
+
   constructor(
     private booksService: BooksService,
     private actions$: Actions<

src/app/shared/state/books.reducer.ts

@@ -54,16 +54,19 @@ export function reducer(
         activeBookId: null
       };
 
-    case BooksPageActions.BooksActionTypes.CreateBook:
-      return adapter.addOne(action.book, state);
+    case BooksApiActions.BooksApiActionTypes.BookCreated:
+      return adapter.addOne(action.book, {
+        ...state,
+        activeBookId: action.book.id
+      });
 
-    case BooksPageActions.BooksActionTypes.UpdateBook:
+    case BooksApiActions.BooksApiActionTypes.BookUpdated:
       return adapter.updateOne(
         { id: action.book.id, changes: action.book },
         { ...state, activeBookId: action.book.id }
       );
 
-    case BooksPageActions.BooksActionTypes.DeleteBook:
+    case BooksApiActions.BooksApiActionTypes.BookDeleted:
       return adapter.removeOne(action.book.id, {
         ...state,
         activeBookId: null