07-action-creators complete

Author: brandonroberts

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

@@ -1,39 +1,29 @@
 import { Book } from "src/app/shared/models/book.model";
-import { Action } from "@ngrx/store";
-
-export enum BooksApiActionTypes {
-  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 {
-  readonly type = BooksApiActionTypes.BooksLoaded;
-
-  constructor(public books: Book[]) {}
-}
-
-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;
+import { createAction, props } from "@ngrx/store";
+
+export const booksLoaded = createAction(
+  "[Books API] Books Loaded Success",
+  props<{ books: Book[] }>()
+);
+
+export const bookCreated = createAction(
+  "[Books API] Book Created",
+  props<{ book: Book }>()
+);
+
+export const bookUpdated = createAction(
+  "[Books API] Book Updated",
+  props<{ book: Book }>()
+);
+
+export const bookDeleted = createAction(
+  "[Books API] Book Deleted",
+  props<{ book: Book }>()
+);
+
+export type BooksApiActions = ReturnType< 
+  | typeof booksLoaded
+  | typeof bookCreated
+  | typeof bookUpdated
+  | typeof bookDeleted
+>;

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

@@ -1,52 +1,37 @@
-import { Book } from "src/app/shared/models/book.model";
-import { Action } from "@ngrx/store";
-
-export enum BooksActionTypes {
-  Enter = '[Books Page] Enter',
-  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 Enter implements Action {
-  readonly type = BooksActionTypes.Enter;
-}
-
-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 = 
-  | Enter
-  | SelectBook
-  | ClearSelectedBook
-  | CreateBook
-  | UpdateBook
-  | DeleteBook
-;
+import { createAction, props } from "@ngrx/store";
+import { BookRequiredProps, Book } from "src/app/shared/models/book.model";
+
+export const enter = createAction("[Books Page] Enter");
+
+export const selectBook = createAction(
+  "[Books Page] Select Book",
+  props<{ bookId: string }>()
+);
+
+export const clearSelectedBook = createAction(
+  "[Books Page] Clear Selected Book"
+);
+
+export const createBook = createAction(
+  "[Books Page] Create Book",
+  props<{ book: BookRequiredProps }>()
+);
+
+export const updateBook = createAction(
+  "[Books Page] Update Book",
+  props<{ book: Book; changes: BookRequiredProps }>()
+);
+
+export const deleteBook = createAction(
+  "[Books Page] Delete Book",
+  props<{ book: Book }>()
+);
+
+export type BooksActions = ReturnType<
+  | typeof enter
+  | typeof selectBook
+  | typeof clearSelectedBook
+  | typeof createBook
+  | typeof updateBook
+  | typeof deleteBook
+>;

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

@@ -10,47 +10,47 @@ export class BooksApiEffects {
 
   @Effect()
   loadBooks$ = this.actions$.pipe(
-    ofType(BooksPageActions.BooksActionTypes.Enter),
+    ofType(BooksPageActions.enter.type),
     mergeMap(() =>
       this.booksService.all()
         .pipe(
-          map(books => new BooksApiActions.BooksLoaded(books)),
+          map(books => BooksApiActions.booksLoaded({books})),
           catchError(() => EMPTY)
         )  
     )
   );
 
   @Effect()
   createBook$ = this.actions$.pipe(
-    ofType(BooksPageActions.BooksActionTypes.CreateBook),
+    ofType(BooksPageActions.createBook.type),
     mergeMap(action =>
       this.booksService.create(action.book)
         .pipe(
-          map(book => new BooksApiActions.BookCreated(book)),
+          map(book => BooksApiActions.bookCreated({book})),
           catchError(() => EMPTY)
         )  
     )
   );
 
   @Effect()
   updateBook$ = this.actions$.pipe(
-    ofType(BooksPageActions.BooksActionTypes.UpdateBook),
+    ofType(BooksPageActions.updateBook.type),
     mergeMap(action =>
       this.booksService.update(action.book.id, action.book)
         .pipe(
-          map(book => new BooksApiActions.BookUpdated(book)),
+          map(book => BooksApiActions.bookUpdated({book})),
           catchError(() => EMPTY)
         )  
     )
   );
 
   @Effect()
   deleteBook$ = this.actions$.pipe(
-    ofType(BooksPageActions.BooksActionTypes.DeleteBook),
+    ofType(BooksPageActions.deleteBook.type),
     mergeMap(action =>
       this.booksService.delete(action.book.id)
         .pipe(
-          map(() => new BooksApiActions.BookDeleted(action.book)),
+          map(() => BooksApiActions.bookDeleted({ book: action.book})),
           catchError(() => EMPTY)
         )  
     )

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

@@ -31,19 +31,19 @@ export class BooksPageComponent implements OnInit {
   }
 
   getBooks() {
-    this.store.dispatch(new BooksPageActions.Enter());
+    this.store.dispatch(BooksPageActions.enter());
   }
 
   onSelect(book: Book) {
-    this.store.dispatch(new BooksPageActions.SelectBook(book.id));
+    this.store.dispatch(BooksPageActions.selectBook({bookId: book.id}));
   }
 
   onCancel() {
     this.removeSelectedBook();
   }
 
   removeSelectedBook() {
-    this.store.dispatch(new BooksPageActions.ClearSelectedBook());
+    this.store.dispatch(BooksPageActions.clearSelectedBook());
   }  
 
   onSave(book: Book) {
@@ -55,14 +55,14 @@ export class BooksPageComponent implements OnInit {
   }
 
   saveBook(book: Book) {
-    this.store.dispatch(new BooksPageActions.CreateBook(book));
+    this.store.dispatch(BooksPageActions.createBook({book}));
   }
 
   updateBook(book: Book) {
-    this.store.dispatch(new BooksPageActions.UpdateBook(book));
+    this.store.dispatch(BooksPageActions.updateBook({book, changes: book}));
   }
 
   onDelete(book: Book) {
-    this.store.dispatch(new BooksPageActions.DeleteBook(book));
+    this.store.dispatch(BooksPageActions.deleteBook({book}));
   }
 }

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

@@ -36,28 +36,28 @@ export const initialState = adapter.getInitialState({
 
 export function reducer(state = initialState, action: BooksPageActions.BooksActions | BooksApiActions.BooksApiActions): State {
   switch(action.type) {
-    case BooksApiActions.BooksApiActionTypes.BooksLoaded:
+    case BooksApiActions.booksLoaded.type:
       return adapter.addAll(action.books, state);
 
-    case BooksPageActions.BooksActionTypes.SelectBook:
+    case BooksPageActions.selectBook.type:
       return {
         ...state,
         activeBookId: action.bookId
       };
 
-    case BooksPageActions.BooksActionTypes.ClearSelectedBook:
+    case BooksPageActions.clearSelectedBook.type:
       return {
         ...state,
         activeBookId: null
       };
 
-    case BooksApiActions.BooksApiActionTypes.BookCreated:
+    case BooksApiActions.bookCreated.type:
       return adapter.addOne(action.book, {...state, activeBookId: action.book.id});
 
-    case BooksApiActions.BooksApiActionTypes.BookUpdated:
+    case BooksApiActions.bookUpdated.type:
       return adapter.updateOne({id: action.book.id, changes: action.book}, {...state, activeBookId: action.book.id});
 
-    case BooksApiActions.BooksApiActionTypes.BookDeleted:
+    case BooksApiActions.bookDeleted.type:
       return adapter.removeOne(action.book.id, {...state, activeBookId: null});
 
     default: