11-entity

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

@@ -1,27 +1,20 @@
 import { createReducer, on, Action, createSelector } from "@ngrx/store";
+import { createEntityAdapter, EntityState } from "@ngrx/entity";
 import {
   BookModel,
   calculateBooksGrossEarnings
 } from "src/app/shared/models/book.model";
 import { BooksPageActions, BooksApiActions } from "src/app/books/actions";
 
-const createBook = (books: BookModel[], book: BookModel) => [...books, book];
-const updateBook = (books: BookModel[], changes: BookModel) =>
-  books.map(book => {
-    return book.id === changes.id ? Object.assign({}, book, changes) : book;
-  });
-const deleteBook = (books: BookModel[], bookId: string) =>
-  books.filter(book => bookId !== book.id);
-
-export interface State {
-  collection: BookModel[];
+export interface State extends EntityState<BookModel> {
   activeBookId: string | null;
 }
 
-export const initialState: State = {
-  collection: [],
+export const adapter = createEntityAdapter<BookModel>();
+
+export const initialState: State = adapter.getInitialState({
   activeBookId: null
-};
+});
 
 export const booksReducer = createReducer(
   initialState,
@@ -38,41 +31,40 @@ export const booksReducer = createReducer(
     };
   }),
   on(BooksApiActions.booksLoaded, (state, action) => {
-    return {
-      ...state,
-      collection: action.books
-    };
+    return adapter.addAll(action.books, state);
   }),
   on(BooksApiActions.bookCreated, (state, action) => {
-    return {
-      collection: createBook(state.collection, action.book),
+    return adapter.addOne(action.book, {
+      ...state,
       activeBookId: null
-    };
+    });
   }),
   on(BooksApiActions.bookUpdated, (state, action) => {
-    return {
-      collection: updateBook(state.collection, action.book),
-      activeBookId: null
-    };
+    return adapter.updateOne(
+      { id: action.book.id, changes: action.book },
+      {
+        ...state,
+        activeBookId: null
+      }
+    );
   }),
   on(BooksApiActions.bookDeleted, (state, action) => {
-    return {
-      ...state,
-      collection: deleteBook(state.collection, action.bookId)
-    };
+    return adapter.removeOne(action.bookId, state);
   })
 );
 
 export function reducer(state: State | undefined, action: Action) {
   return booksReducer(state, action);
 }
 
-export const selectAll = (state: State) => state.collection;
+export const { selectAll, selectEntities } = adapter.getSelectors();
 export const selectActiveBookId = (state: State) => state.activeBookId;
 export const selectActiveBook = createSelector(
-  selectAll,
+  selectEntities,
   selectActiveBookId,
-  (books, activeBookId) => books.find(book => book.id === activeBookId) || null
+  (booksEntities, activeBookId) => {
+    return activeBookId ? booksEntities[activeBookId]! : null;
+  }
 );
 export const selectEarningsTotals = createSelector(
   selectAll,