thecodinganalyst

import {Book} from "../book";

export interface AppState {
  bookStore: BookStore;
}

export interface BookStore {
  books: ReadonlyArray<Book>;
  selectedBook?: Book;
  showDetail: boolean;

thecodinganalyst

import {createFeatureSelector, createSelector} from "@ngrx/store";
import {BookStore} from "./books.state";

const bookStore = createFeatureSelector<BookStore>('bookStore');

const books = createSelector( bookStore, (bookStoreState => bookStoreState.books));

const selectedBook = createSelector(bookStore, (bookStoreState => bookStoreState.selectedBook));

const showDetail = createSelector(bookStore, (bookStoreState => bookStoreState.showDetail));

thecodinganalyst

import {createAction, props} from "@ngrx/store";
import {Book} from "../book";

const loadBooks = createAction("[BookList] Load Books");

const booksLoaded = createAction("[BookList] Books Loaded", props<{ books: ReadonlyArray<Book> }>())

const showBook = createAction("[BookList] Show Book", props<{book: Book}>());

const newBook = createAction("[BookList] New Book");

thecodinganalyst

import {createReducer, on} from "@ngrx/store";
import {BookStoreActions} from "./books.actions";
import {BookStore} from "./books.state";

export const initialState: BookStore = { books: [], selectedBook: undefined, showDetail: false};

export const booksReducer = createReducer(
  initialState,
  on(BookStoreActions.booksLoaded, (state, {books}) => ({...state, books: books})),
  on(BookStoreActions.showBook, (state, {book}) => ({...state, selectedBook: book, showDetail: true})),

thecodinganalyst

@Injectable()
export class BooksEffects {

  loadBooks$ = createEffect(() => this.actions$.pipe(
    ofType(BookStoreActions.loadBooks),
    mergeMap(() => this.booksService.getBooks().pipe(
      map(books => BookStoreActions.booksLoaded({books})),
      catchError(() => EMPTY)
    ))
  ));

thecodinganalyst

@NgModule({
  declarations: [
    AppComponent,
    ItemComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {dataEncapsulation: false}),
    ReactiveFormsModule,

thecodinganalyst

@NgModule({
  declarations: [
    AppComponent,
    ItemComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {dataEncapsulation: false}),
    ReactiveFormsModule,

thecodinganalyst

ngOnInit(): void{
  this.loadBooks();
  this.store.select(Selector.books).subscribe(books => this.books$ = books);
  this.store.select(Selector.selectedBook).subscribe(book => {
    this.selectedBook = book;
  });
  this.store.select(Selector.showDetail).subscribe(showDetail => {
    this.showDetail = showDetail;
    showDetail ? this.showPopup() : this.hidePopup();
  });

thecodinganalyst

let store: MockStore<AppState>;
beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [AppComponent, ItemComponent],
    imports: [ReactiveFormsModule],
    providers: [provideMockStore()],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  });
  fixture = TestBed.createComponent(AppComponent);
  app = fixture.componentInstance;

thecodinganalyst

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [
      BooksEffects,
      provideMockActions(() => actions$),
      provideMockStore({initialState}),
    ],
    imports: [HttpClientModule]
  })
  booksService = TestBed.inject(BooksService)