title: NgRx/Effects not triggering the Reducer
body: <p>I know the title of the question is vague, but unfortunately I don't exactly know what is causing my issue so please bear with me.</p>
  
  <p>I just started working on a small Angular 8 task, which uses NgRx/Store and NgRx/Effects as well. I am fetching an array of <code>Book</code> objects using a <code>getBooks</code> function. My codes are as follows(Haven't put inports everywhere just to make the code parts shorter)</p>
  
  <p><strong>book.component.ts</strong></p>
  
  <pre><code>export class BookComponent {
  
    constructor(private booksService: BooksService, public store: Store&lt;BooksState&gt;) {
      this.books$ = store.pipe(select('books'));
    }
  
    books$: Observable&lt;BooksState&gt;;
    BooksSubscription: Subscription;
    booksList: Book[];
  
    ngOnInit() {
      this.BooksSubscription = this.books$
        .pipe( map(x =&gt; { this.booksList = x.Books; }) ).subscribe();
      this.store.dispatch(BooksActions.BeginGetBooksAction())
    }
  }
  </code></pre>
  
  <p><strong>book.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import booksData from "../../books.json";
  
  @Injectable()
  export class BooksService {
    constructor() { }
  
    getBooks(){
        return booksData;
    }
  }
  </code></pre>
  
  <p><code>booksData</code> is an array of objects of type <code>Book</code> which I import from a <code>json</code> file.</p>
  
  <p><strong>book.action.ts</strong></p>
  
  <pre><code>import { createAction, props } from "@ngrx/store";
  import { Book } from "./book";
  
  export const GetBooksAction = createAction("GetBooks");
  export const BeginGetBooksAction = createAction("BeginGetBooks");
  export const SuccessGetBooksAction = createAction( "SuccessGetBooks", props&lt;{ payload: Book[] }&gt;());
  
  </code></pre>
  
  <p><strong>book.reducer.ts</strong></p>
  
  <pre><code>import { Action, createReducer, on } from "@ngrx/store";
  import * as BooksActions from "./book.action";
  import { Book } from "./book";
  
  export interface BooksState {
    Books: Book[];
  }
  
  const initialState: BooksState = {
      Books: []
  };
  
  const booksReducer = createReducer(
      initialState,
      on(BooksActions.GetBooksAction, state =&gt; state))
      on(BooksActions.SuccessGetBooksAction, (state: BooksState, { payload }) =&gt; {
        console.log(payload)
        return { ...state, Books: payload };
      });
  
    export function reducer(state: BooksState | undefined, action: Action) {
      return booksReducer(state, action);
    }
  </code></pre>
  
  <p><strong>book.effect.ts</strong></p>
  
  <p>Now this is where I'm lost. I found a reference code on the NgRx docs based on which I wrote my code but it does not work</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Actions, createEffect, ofType } from '@ngrx/effects';
  import { Action } from '@ngrx/store';
  import { Observable } from 'rxjs';
  import { map, mergeMap} from 'rxjs/operators';
  import * as BooksActions from './book.action';
  import { Book } from './book';
  import { BooksService } from './book.service';
  
  
  @Injectable()
  export class BooksEffects {
      constructor(private action$: Actions, private booksService: BooksService) { }
  
       GetBooks$: Observable&lt;Action&gt; = createEffect(() =&gt;
          this.action$.pipe(
              ofType(BooksActions.BeginGetBooksAction),
              mergeMap(
                  () =&gt; this.booksService.getBooks().pipe(
                      map((booksData: Book[]) =&gt; {
                          return BooksActions.SuccessGetBooksAction({ payload: booksData });
                      }))
              )
          )
      )
    );
  }
  </code></pre>
  
  <p>I get following errors during compilation. The errors are on the lines where I have <code>pipe functions</code></p>
  
  <pre><code>error TS2322: Type 'Observable&lt;unknown&gt;' is not assignable to type 'Observable&lt;Action&gt; | ((...args: any[]) 
  =&gt; Observable&lt;Action&gt;)'.
        Type 'Observable&lt;unknown&gt;' is not assignable to type 'Observable&lt;Action&gt;'.
          Property 'type' is missing in type '{}' but required in type 'Action'.
  </code></pre>
  
  <hr>
  
  <p><code>error TS2339: Property 'pipe' does not exist on type '{ "isbn": string; "title": string; "subtitle": string; "author": string; "published": string; "publisher": string; "pages": number; "description": string; "website": string; }[]'.</code></p>
  
  <p>Also, I have added <code>StoreModule.forRoot({ books: reducer})</code> and <code>EffectsModule.forRoot([BooksEffects])</code> to <code>imports</code> and added <code>BookService</code> to <code>Providers</code> in <strong>app.module.ts</strong></p>