docs: refactor books to createFeature

Author: rainerhahnekamp

projects/example-app/src/app/books/books.routes.ts

@@ -6,32 +6,12 @@ import {
   ViewBookPageComponent,
 } from '@example-app/books/containers';
 import { bookExistsGuard } from '@example-app/books/guards';
-import { provideState } from '@ngrx/store';
-import * as fromBooks from '@example-app/books/reducers';
-import { provideEffects } from '@ngrx/effects';
-import { BookEffects, CollectionEffects } from './effects';
+import { provideBooks } from '@example-app/books/reducers';
 
 export const BOOKS_ROUTES: Routes = [
   {
     path: '',
-    providers: [
-      /**
-       * provideState() is used for composing state
-       * from feature modules. These modules can be loaded
-       * eagerly or lazily and will be dynamically added to
-       * the existing state.
-       */
-      provideState(fromBooks.booksFeatureKey, fromBooks.reducers),
-      /**
-       * provideEffects() is used to register effects
-       * from feature modules. Effects can be loaded
-       * eagerly or lazily and will be started immediately.
-       *
-       * All Effects will only be instantiated once regardless of
-       * whether they are registered once or multiple times.
-       */
-      provideEffects(BookEffects, CollectionEffects),
-    ],
+    providers: [provideBooks()],
     children: [
       {
         path: 'find',

projects/example-app/src/app/books/reducers/books.reducer.spec.ts

@@ -1,10 +1,10 @@
-import { reducer } from '@example-app/books/reducers/books.reducer';
 import * as fromBooks from '@example-app/books/reducers/books.reducer';
 import { BooksApiActions } from '@example-app/books/actions/books-api.actions';
 import { BookActions } from '@example-app/books/actions/book.actions';
 import { CollectionApiActions } from '@example-app/books/actions/collection-api.actions';
 import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.actions';
 import { Book, generateMockBook } from '@example-app/books/models';
+import { booksFeature } from '@example-app/books/reducers/books.reducer';
 
 describe('BooksReducer', () => {
   const book1 = generateMockBook();
@@ -21,7 +21,7 @@ describe('BooksReducer', () => {
 
   describe('undefined action', () => {
     it('should return the default state', () => {
-      const result = reducer(undefined, {} as any);
+      const result = booksFeature.reducer(undefined, {} as any);
 
       expect(result).toMatchSnapshot();
     });
@@ -38,7 +38,7 @@ describe('BooksReducer', () => {
     ) {
       const createAction = action({ books });
 
-      const result = reducer(booksInitialState, createAction);
+      const result = booksFeature.reducer(booksInitialState, createAction);
 
       expect(result).toMatchSnapshot();
     }
@@ -52,7 +52,7 @@ describe('BooksReducer', () => {
       const differentBook2 = { ...books[0], foo: 'bar' };
       const createAction = action({ books: [books[1], differentBook2] });
 
-      const result = reducer(booksInitialState, createAction);
+      const result = booksFeature.reducer(booksInitialState, createAction);
 
       expect(result).toMatchSnapshot();
     }
@@ -94,15 +94,15 @@ describe('BooksReducer', () => {
     it('should add a single book, if the book does not exist', () => {
       const action = BookActions.loadBook({ book: book1 });
 
-      const result = reducer(fromBooks.initialState, action);
+      const result = booksFeature.reducer(fromBooks.initialState, action);
 
       expect(result).toMatchSnapshot();
     });
 
     it('should return the existing state if the book exists', () => {
       const action = BookActions.loadBook({ book: book1 });
 
-      const result = reducer(expectedResult, action);
+      const result = booksFeature.reducer(expectedResult, action);
 
       expect(result).toMatchSnapshot();
     });
@@ -112,7 +112,7 @@ describe('BooksReducer', () => {
     it('should set the selected book id on the state', () => {
       const action = ViewBookPageActions.selectBook({ id: book1.id });
 
-      const result = reducer(initialState, action);
+      const result = booksFeature.reducer(initialState, action);
 
       expect(result).toMatchSnapshot();
     });
@@ -121,7 +121,7 @@ describe('BooksReducer', () => {
   describe('Selectors', () => {
     describe('selectId', () => {
       it('should return the selected id', () => {
-        const result = fromBooks.selectId({
+        const result = booksFeature.selectSelectedBookId.projector({
           ...initialState,
           selectedBookId: book1.id,
         });

projects/example-app/src/app/books/reducers/books.reducer.ts

@@ -1,14 +1,12 @@
 import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
-import { createReducer, on } from '@ngrx/store';
+import { createFeature, createReducer, on } from '@ngrx/store';
 
 import { BooksApiActions } from '@example-app/books/actions/books-api.actions';
 import { BookActions } from '@example-app/books/actions/book.actions';
 import { CollectionApiActions } from '@example-app/books/actions/collection-api.actions';
 import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.actions';
 import { Book } from '@example-app/books/models';
 
-export const booksFeatureKey = 'books';
-
 /**
  * @ngrx/entity provides a predefined interface for handling
  * a structured dictionary of records. This interface
@@ -42,41 +40,33 @@ export const initialState: State = adapter.getInitialState({
   selectedBookId: null,
 });
 
-export const reducer = createReducer(
-  initialState,
-  /**
-   * The addMany function provided by the created adapter
-   * adds many records to the entity dictionary
-   * and returns a new state including those records. If
-   * the collection is to be sorted, the adapter will
-   * sort each record upon entry into the sorted array.
-   */
-  on(
-    BooksApiActions.searchSuccess,
-    CollectionApiActions.loadBooksSuccess,
-    (state, { books }) => adapter.addMany(books, state)
+export const booksFeature = createFeature({
+  name: 'books',
+  reducer: createReducer(
+    initialState,
+    /**
+     * The addMany function provided by the created adapter
+     * adds many records to the entity dictionary
+     * and returns a new state including those records. If
+     * the collection is to be sorted, the adapter will
+     * sort each record upon entry into the sorted array.
+     */
+    on(
+      BooksApiActions.searchSuccess,
+      CollectionApiActions.loadBooksSuccess,
+      (state, { books }) => adapter.addMany(books, state)
+    ),
+    /**
+     * The addOne function provided by the created adapter
+     * adds one record to the entity dictionary
+     * and returns a new state including that records if it doesn't
+     * exist already. If the collection is to be sorted, the adapter will
+     * insert the new record into the sorted array.
+     */
+    on(BookActions.loadBook, (state, { book }) => adapter.addOne(book, state)),
+    on(ViewBookPageActions.selectBook, (state, { id }) => ({
+      ...state,
+      selectedBookId: id,
+    }))
   ),
-  /**
-   * The addOne function provided by the created adapter
-   * adds one record to the entity dictionary
-   * and returns a new state including that records if it doesn't
-   * exist already. If the collection is to be sorted, the adapter will
-   * insert the new record into the sorted array.
-   */
-  on(BookActions.loadBook, (state, { book }) => adapter.addOne(book, state)),
-  on(ViewBookPageActions.selectBook, (state, { id }) => ({
-    ...state,
-    selectedBookId: id,
-  }))
-);
-
-/**
- * Because the data structure is defined within the reducer it is optimal to
- * locate our selector functions at this level. If store is to be thought of
- * as a database, and reducers the tables, selectors can be considered the
- * queries into said database. Remember to keep your selectors small and
- * focused so they can be combined and composed to fit each particular
- * use-case.
- */
-
-export const selectId = (state: State) => state.selectedBookId;
+});

projects/example-app/src/app/books/reducers/collection.reducer.ts

@@ -1,11 +1,9 @@
-import { createReducer, on } from '@ngrx/store';
+import { createFeature, createReducer, on } from '@ngrx/store';
 
 import { CollectionApiActions } from '@example-app/books/actions/collection-api.actions';
 import { CollectionPageActions } from '@example-app/books/actions/collection-page.actions';
 import { SelectedBookPageActions } from '@example-app/books/actions/selected-book-page.actions';
 
-export const collectionFeatureKey = 'collection';
-
 export interface State {
   loaded: boolean;
   loading: boolean;
@@ -18,53 +16,56 @@ const initialState: State = {
   ids: [],
 };
 
-export const reducer = createReducer(
-  initialState,
-  on(CollectionPageActions.enter, (state) => ({
-    ...state,
-    loading: true,
-  })),
-  on(CollectionApiActions.loadBooksSuccess, (_state, { books }) => ({
-    loaded: true,
-    loading: false,
-    ids: books.map((book) => book.id),
-  })),
-  /**
-   * Optimistically add book to collection.
-   * If this succeeds there's nothing to do.
-   * If this fails we revert state by removing the book.
-   *
-   * `on` supports handling multiple types of actions
-   */
-  on(
-    SelectedBookPageActions.addBook,
-    CollectionApiActions.removeBookFailure,
-    (state, { book }) => {
-      if (state.ids.indexOf(book.id) > -1) {
-        return state;
+export const collectionFeature = createFeature({
+  name: 'booksCollection',
+  reducer: createReducer(
+    initialState,
+    on(CollectionPageActions.enter, (state) => ({
+      ...state,
+      loading: true,
+    })),
+    on(CollectionApiActions.loadBooksSuccess, (_state, { books }) => ({
+      loaded: true,
+      loading: false,
+      ids: books.map((book) => book.id),
+    })),
+    /**
+     * Optimistically add book to collection.
+     * If this succeeds there's nothing to do.
+     * If this fails we revert state by removing the book.
+     *
+     * `on` supports handling multiple types of actions
+     */
+    on(
+      SelectedBookPageActions.addBook,
+      CollectionApiActions.removeBookFailure,
+      (state, { book }) => {
+        if (state.ids.indexOf(book.id) > -1) {
+          return state;
+        }
+        return {
+          ...state,
+          ids: [...state.ids, book.id],
+        };
       }
-      return {
+    ),
+    /**
+     * Optimistically remove book from collection.
+     * If addBook fails, we "undo" adding the book.
+     */
+    on(
+      SelectedBookPageActions.removeBook,
+      CollectionApiActions.addBookFailure,
+      (state, { book }) => ({
         ...state,
-        ids: [...state.ids, book.id],
-      };
-    }
+        ids: state.ids.filter((id) => id !== book.id),
+      })
+    )
   ),
-  /**
-   * Optimistically remove book from collection.
-   * If addBook fails, we "undo" adding the book.
-   */
-  on(
-    SelectedBookPageActions.removeBook,
-    CollectionApiActions.addBookFailure,
-    (state, { book }) => ({
-      ...state,
-      ids: state.ids.filter((id) => id !== book.id),
-    })
-  )
-);
+});
 
-export const getLoaded = (state: State) => state.loaded;
+export const getLoaded = collectionFeature.selectLoaded;
 
-export const getLoading = (state: State) => state.loading;
+export const getLoading = collectionFeature.selectLoading;
 
-export const getIds = (state: State) => state.ids;
+export const getIds = collectionFeature.selectIds;