05-effects

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,12 +10,16 @@ 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,
     ReactiveFormsModule,
     MaterialModule,
-    RouterModule.forChild([{ path: "books", component: BooksPageComponent }])
+    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";
 import { createSelector } from "@ngrx/store";
 
 export const initialBooks: Book[] = [
@@ -36,11 +36,11 @@ export const initialState = adapter.getInitialState({
 
 export function reducer(
   state = initialState,
-  action: BooksPageActions.BooksActions
+  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 {