00-setup complete

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

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

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

@@ -27,3 +27,21 @@ const updateBook = (books: Book[], book: Book) => books.map(w => {
   return w.id === book.id ? Object.assign({}, book) : w;
 });
 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>[] = [];