example-app-fixes.diff

diff --git a/example-app/src/app/books/books.component.ts b/example-app/src/app/books/books.component.ts
index 7e5e866..6ef0dda 100644
--- a/example-app/src/app/books/books.component.ts
+++ b/example-app/src/app/books/books.component.ts
@@ -9,8 +9,9 @@ import {
   getTag,
   tagDemoData,
 } from "../app.initializer";
+import { AppState } from "../store/app.reducer";
 import { upsertAuthor } from "../store/author";
-import { addTagToBook, Book, upsertBook } from "../store/book";
+import { addTagToBookImmutable, Book, upsertBook } from "../store/book";
 import { BookView, getBookView } from "../store/book-view";
 import { Tag, upsertTag } from "../store/tag";
 
@@ -38,12 +39,12 @@ function wrapLoading(
 export class BooksComponent implements OnInit {
   books!: BookViewWithLoading[];
 
-  constructor(private readonly store: Store<{}>) {}
+  constructor(private readonly store: Store<AppState>) {}
 
   ngOnInit(): void {
     this.books = bookDemoData
       .map((book) => book.id)
-      .map((id) => this.store.pipe(select(getBookView, id)))
+      .map((id) => this.store.pipe(select(getBookView(id))))
       .map(wrapLoading);
   }
 
@@ -68,6 +69,8 @@ export class BooksComponent implements OnInit {
     this.store.dispatch(upsertTag({ tag }));
     let index = Math.floor(Math.random() * bookDemoData.length);
     const book = bookDemoData.find((_, i) => i == index) as Book;
-    this.store.dispatch(addTagToBook({ bookId: book.id, tagId: tag.id }));
+    this.store.dispatch(
+      addTagToBookImmutable({ bookId: book.id, tagId: tag.id })
+    );
   }
 }
diff --git a/example-app/src/app/fibonacci/fibonacci.ts b/example-app/src/app/fibonacci/fibonacci.ts
index f7ab712..985d601 100644
--- a/example-app/src/app/fibonacci/fibonacci.ts
+++ b/example-app/src/app/fibonacci/fibonacci.ts
@@ -1,6 +1,6 @@
-// import { memoize } from "lodash-es";
+import { memoize } from "lodash-es";
 
-const fibonacci = (val: number): number => {
+const fibonacci = memoize((val: number): number => {
   // console.log({ val });
 
   if (val < 2) {
@@ -8,7 +8,7 @@ const fibonacci = (val: number): number => {
   } else {
     return fibonacci(val - 1) + fibonacci(val - 2);
   }
-};
+});
 
 export interface FibonacciReturnType {
   value: number;
diff --git a/example-app/src/app/store/book-view/index.ts b/example-app/src/app/store/book-view/index.ts
index 42092b9..986c9ef 100644
--- a/example-app/src/app/store/book-view/index.ts
+++ b/example-app/src/app/store/book-view/index.ts
@@ -33,17 +33,18 @@ export const calculateNew = (book: Book | undefined) => {
   return !!fib?.fib && fib?.fib > 100_000_000;
 };
 
-export const getBookView = createSelector(
-  getBook,
-  getAuthorsOfBook,
-  getTagsOfBook,
-  (book, authors, tags): BookView | undefined =>
-    book && {
-      title: book.title,
-      description: book.description,
-      published: new Date(book.published),
-      // isNew: calculateNew(book),
-      authors,
-      tags,
-    }
-);
+export const getBookView = (bookId: string) =>
+  createSelector(
+    getBook(bookId),
+    getAuthorsOfBook(bookId),
+    getTagsOfBook(bookId),
+    (book, authors, tags): BookView | undefined =>
+      book && {
+        title: book.title,
+        description: book.description,
+        published: new Date(book.published),
+        // isNew: calculateNew(book),
+        authors,
+        tags,
+      }
+  );
diff --git a/example-app/src/app/store/book/index.ts b/example-app/src/app/store/book/index.ts
index f11a5e3..4976276 100644
--- a/example-app/src/app/store/book/index.ts
+++ b/example-app/src/app/store/book/index.ts
@@ -9,9 +9,12 @@ import {
   createFeatureSelector,
   createReducer,
   createSelector,
+  createSelectorFactory,
   on,
   props,
+  resultMemoize,
 } from "@ngrx/store";
+import { AppState } from "../app.reducer";
 import { Author, getAuthorEntities } from "../author";
 import { getTagEntities, Tag } from "../tag";
 import { Book } from "./book.model";
@@ -64,30 +67,32 @@ export const getBookState = createFeatureSelector<BookState>("book");
 export const { selectEntities: getBookEntities } =
   bookAdapter.getSelectors(getBookState);
 
-export const getBook = createSelector(
-  getBookEntities,
-  (books: Dictionary<Book>, bookId: string) => books[bookId]
-);
+export const getBook = (bookId: string) =>
+  createSelector(getBookEntities, (books: Dictionary<Book>) => books[bookId]);
 
 export const checkEqual = (a: unknown[], b: unknown[]) =>
   a && b && a.length === b.length && a.every((val, idx) => val === b[idx]);
 
-export const getAuthorsOfBook = createSelector(
-  getBook,
-  getAuthorEntities,
-  (book, authors) =>
-    book
-      ? (book.authorIds
-          .map((authorId) => authors[authorId])
-          .filter((x) => !!x) as Author[])
-      : []
-);
+export const getAuthorsOfBook = (bookId: string) =>
+  createSelectorFactory<AppState, Author[]>((p) =>
+    resultMemoize(p, checkEqual)
+  )(
+    getBook(bookId),
+    getAuthorEntities,
+    (book: Book | undefined, authors: Dictionary<Author>) =>
+      book
+        ? (book.authorIds
+            .map((authorId) => authors[authorId])
+            .filter((x) => !!x) as Author[])
+        : []
+  );
 
-export const getTagsOfBook = createSelector(
-  getBook,
-  getTagEntities,
-  (book, tags) =>
-    book
-      ? (book.tagIds.map((tagId) => tags[tagId]).filter((x) => !!x) as Tag[])
-      : []
-);
+export const getTagsOfBook = (bookId: string) =>
+  createSelectorFactory<AppState, Tag[]>((p) => resultMemoize(p, checkEqual))(
+    getBook(bookId),
+    getTagEntities,
+    (book: Book | undefined, tags: Dictionary<Tag>) =>
+      book
+        ? (book.tagIds.map((tagId) => tags[tagId]).filter((x) => !!x) as Tag[])
+        : []
+  );