05-effects loading complete

Author: brandonroberts

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

@@ -1,2 +1,15 @@
 import { Book } from "src/app/shared/models/book.model";
 import { Action } from "@ngrx/store";
+
+export enum BooksApiActionTypes {
+  BooksLoaded = '[Books API] Books Loaded Success',
+}
+
+export class BooksLoaded implements Action {
+  readonly type = BooksApiActionTypes.BooksLoaded;
+
+  constructor(public books: Book[]) {}
+}
+
+export type BooksApiActions = 
+  | BooksLoaded;

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

@@ -0,0 +1,27 @@
+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 { EMPTY } from 'rxjs';
+
+@Injectable()
+export class BooksApiEffects {
+
+  @Effect()
+  loadBooks$ = this.actions$.pipe(
+    ofType(BooksPageActions.BooksActionTypes.Enter),
+    mergeMap(() =>
+      this.booksService.all()
+        .pipe(
+          map(books => new BooksApiActions.BooksLoaded(books)),
+          catchError(() => EMPTY)
+        )  
+    )
+  );
+
+  constructor(
+    private booksService: BooksService,
+    private actions$: Actions<BooksPageActions.BooksActions | BooksApiActions.BooksApiActions>
+  ) {}
+}

src/app/books/books.module.ts

@@ -10,6 +10,9 @@ import { BookDetailComponent } from './components/book-detail/book-detail.compon
 import { BooksListComponent } from './components/books-list/books-list.component';
 import { BooksTotalComponent } from './components/books-total/books-total.component';
 
+import { EffectsModule } from '@ngrx/effects';
+import { BooksApiEffects } from './books-api.effects';
+
 @NgModule({
   imports: [
     CommonModule,
@@ -18,6 +21,7 @@ import { BooksTotalComponent } from './components/books-total/books-total.compon
     RouterModule.forChild([
       { path: 'books', component: BooksPageComponent }
     ]),
+    EffectsModule.forFeature([BooksApiEffects])
   ],
   declarations: [
     BooksPageComponent,

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

@@ -5,7 +5,6 @@ import { Book } from 'src/app/shared/models/book.model';
 import { Observable } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 import * as fromRoot from 'src/app/shared/state';
-import { map, tap } from 'rxjs/operators';
 import { BooksPageActions } from '../../actions';
 
 @Component({

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

@@ -1,6 +1,6 @@
 import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
 import { Book } from 'src/app/shared/models/book.model';
-import { BooksPageActions } from 'src/app/books/actions';
+import { BooksPageActions, BooksApiActions } from 'src/app/books/actions';
 
 
 export const initialBooks: Book[] = [
@@ -34,10 +34,10 @@ export const initialState = adapter.getInitialState({
   activeBookId: null
 });
 
-export function reducer(state = initialState, action: BooksPageActions.BooksActions): State {
+export function reducer(state = initialState, action: BooksPageActions.BooksActions | BooksApiActions.BooksApiActions): State {
   switch(action.type) {
-    case BooksPageActions.BooksActionTypes.Enter:
-      return adapter.addAll(initialBooks, state);
+    case BooksApiActions.BooksApiActionTypes.BooksLoaded:
+      return adapter.addAll(action.books, state);
 
     case BooksPageActions.BooksActionTypes.SelectBook:
       return {