00-setup

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

@@ -3,7 +3,7 @@
     <app-books-total [total]="total"> </app-books-total>
 
     <app-books-list
-      [books]="books"
+      [books]="books$ | async"
       (select)="onSelect($event)"
       (delete)="onDelete($event)"
     >

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

@@ -3,17 +3,31 @@ import { Component, OnInit } from "@angular/core";
 import { Book } from "src/app/shared/models/book.model";
 import { BooksService } from "src/app/shared/services/book.service";
 
+import { Observable } from "rxjs";
+import { Store, select } from "@ngrx/store";
+import * as fromRoot from "src/app/shared/state";
+import { map } from "rxjs/operators";
+
 @Component({
   selector: "app-books",
   templateUrl: "./books-page.component.html",
   styleUrls: ["./books-page.component.css"]
 })
 export class BooksPageComponent implements OnInit {
+  books$: Observable<Book[]>;
   books: Book[];
   currentBook: Book;
   total: number;
 
-  constructor(private booksService: BooksService) {}
+  constructor(
+    private booksService: BooksService,
+    private store: Store<fromRoot.State>
+  ) {
+    this.books$ = this.store.pipe(
+      select(state => state.books),
+      map(booksState => booksState.books)
+    );
+  }
 
   ngOnInit() {
     this.getBooks();

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

@@ -29,3 +29,20 @@ const updateBook = (books: Book[], book: Book) =>
   });
 const deleteBook = (books: Book[], book: Book) =>
   books.filter(w => book.id !== w.id);
+
+export interface State {
+  activeBookId: string | null;
+  books: Book[];
+}
+
+export const initialState = {
+  activeBookId: null,
+  books: initialBooks
+};
+
+export function reducer(state = initialState, action: any): State {
+  switch (action.type) {
+    default:
+      return state;
+  }
+}

src/app/shared/state/index.ts

@@ -1,12 +1,15 @@
 import { ActionReducerMap, createSelector, MetaReducer } from "@ngrx/store";
 import * as fromMovies from "./movie.reducer";
+import * as fromBooks from "./books.reducer";
 
 export interface State {
   movies: fromMovies.State;
+  books: fromBooks.State;
 }
 
 export const reducers: ActionReducerMap<State> = {
-  movies: fromMovies.reducer
+  movies: fromMovies.reducer,
+  books: fromBooks.reducer
 };
 
 export const metaReducers: MetaReducer<State>[] = [];