diff --git a/src/app/books/actions/books-api.actions.ts b/src/app/books/actions/books-api.actions.ts index 5326615..2c48a20 100644 --- a/src/app/books/actions/books-api.actions.ts +++ b/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; diff --git a/src/app/books/books-api.effects.ts b/src/app/books/books-api.effects.ts new file mode 100644 index 0000000..0107a38 --- /dev/null +++ b/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 + > + ) {} +} diff --git a/src/app/books/books.module.ts b/src/app/books/books.module.ts index b4f9691..7d6732a 100644 --- a/src/app/books/books.module.ts +++ b/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, 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 39b61bd..93c8ebe 100755 --- a/src/app/books/components/books-page/books-page.component.ts +++ b/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({ diff --git a/src/app/shared/state/books.reducer.ts b/src/app/shared/state/books.reducer.ts index 9865560..f24b393 100644 --- a/src/app/shared/state/books.reducer.ts +++ b/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 {