02-actions

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

@@ -1,2 +1,45 @@
 import { Book } from "src/app/shared/models/book.model";
 import { Action } from "@ngrx/store";
+
+export enum BooksActionTypes {
+  SelectBook = "[Books Page] Select Book",
+  ClearSelectedBook = "[Books Page] Clear Selected Book",
+  CreateBook = "[Books Page] Create Book",
+  UpdateBook = "[Books Page] Update Book",
+  DeleteBook = "[Books Page] Delete Book"
+}
+
+export class SelectBook implements Action {
+  readonly type = BooksActionTypes.SelectBook;
+
+  constructor(public bookId: string) {}
+}
+
+export class ClearSelectedBook implements Action {
+  readonly type = BooksActionTypes.ClearSelectedBook;
+}
+
+export class CreateBook implements Action {
+  readonly type = BooksActionTypes.CreateBook;
+
+  constructor(public book: Book) {}
+}
+
+export class UpdateBook implements Action {
+  readonly type = BooksActionTypes.UpdateBook;
+
+  constructor(public book: Book) {}
+}
+
+export class DeleteBook implements Action {
+  readonly type = BooksActionTypes.DeleteBook;
+
+  constructor(public book: Book) {}
+}
+
+export type BooksActions =
+  | SelectBook
+  | ClearSelectedBook
+  | CreateBook
+  | UpdateBook
+  | DeleteBook;

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

@@ -5,7 +5,8 @@ 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 } from "rxjs/operators";
+import { map, tap } from "rxjs/operators";
+import { BooksPageActions } from "../../actions";
 
 @Component({
   selector: "app-books",
@@ -20,7 +21,8 @@ export class BooksPageComponent implements OnInit {
   constructor(private store: Store<fromRoot.State>) {
     this.books$ = this.store.pipe(
       select(state => state.books),
-      map(booksState => booksState.books)
+      map(booksState => booksState.books),
+      tap(books => this.updateTotals(books))
     );
   }
 
@@ -40,7 +42,7 @@ export class BooksPageComponent implements OnInit {
   }
 
   onSelect(book: Book) {
-    this.store.dispatch({ type: "select", bookId: book.id });
+    this.store.dispatch(new BooksPageActions.SelectBook(book.id));
     this.currentBook = book;
   }
 
@@ -49,7 +51,7 @@ export class BooksPageComponent implements OnInit {
   }
 
   removeSelectedBook() {
-    this.store.dispatch({ type: "clear select" });
+    this.store.dispatch(new BooksPageActions.ClearSelectedBook());
     this.currentBook = null;
   }
 
@@ -62,14 +64,14 @@ export class BooksPageComponent implements OnInit {
   }
 
   saveBook(book: Book) {
-    this.store.dispatch({ type: "create", book });
+    this.store.dispatch(new BooksPageActions.CreateBook(book));
   }
 
   updateBook(book: Book) {
-    this.store.dispatch({ type: "update", book });
+    this.store.dispatch(new BooksPageActions.UpdateBook(book));
   }
 
   onDelete(book: Book) {
-    this.store.dispatch({ type: "delete", book });
+    this.store.dispatch(new BooksPageActions.DeleteBook(book));
   }
 }

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

@@ -1,5 +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";
 
 const initialBooks: Book[] = [
   {
@@ -40,29 +41,32 @@ export const initialState = {
   books: initialBooks
 };
 
-export function reducer(state = initialState, action: any): State {
+export function reducer(
+  state = initialState,
+  action: BooksPageActions.BooksActions
+): State {
   switch (action.type) {
-    case "select":
+    case BooksPageActions.BooksActionTypes.SelectBook:
       return {
         activeBookId: action.bookId,
         books: state.books
       };
-    case "clear select":
+    case BooksPageActions.BooksActionTypes.ClearSelectedBook:
       return {
         activeBookId: null,
         books: state.books
       };
-    case "create":
+    case BooksPageActions.BooksActionTypes.CreateBook:
       return {
         activeBookId: state.activeBookId,
         books: createBook(state.books, action.book)
       };
-    case "update":
+    case BooksPageActions.BooksActionTypes.UpdateBook:
       return {
         activeBookId: state.activeBookId,
         books: updateBook(state.books, action.book)
       };
-    case "delete":
+    case BooksPageActions.BooksActionTypes.DeleteBook:
       return {
         activeBookId: null,
         books: deleteBook(state.books, action.book)