title: How do I get the value from an ngrx store into my template?
body: <p>A total Redux noob here, I am having a little difficulty getting my data out of the store for use within my view. Here are my Actions, Reducers etc. </p>
  
  <p><strong>genre.model.ts</strong></p>
  
  <pre><code>export interface Genre {
      id: string;
      title: string;
      description: string;
      slug: string;
      error: string;
  }
  
  export const initialState: Genre = {
      id: '',
      title: '',
      description: '',
      slug: '',
      error: null
  };
  </code></pre>
  
  <p><strong>genre.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import { Http } from '@angular/http';
  import {environment} from "../../../environments/environment";
  import {Genre} from "./genre.model";
  
  @Injectable()
  export class GenreService {
  
      apiUrl = environment.apiUrl + environment.apiVersion + '/';
  
      constructor(private http: Http) { }
  
      /**
       * Gets Genres
       *
       * @returns {Observable&lt;Genre[]&gt;}
       */
      getGenres(): Observable&lt;Genre[]&gt; {
          return this.http.get(this.apiUrl + 'genres/')
              .map(res =&gt; res.json());
      }
  
      /**
       * Gets an individual genre
       *
       * @param {String} slug
       * @returns {Observable&lt;Genre[]&gt;}
       */
      getGenre(slug: String): Observable&lt;Genre[]&gt; {
          return this.http.get(this.apiUrl + 'genres/' + slug)
              .map(res =&gt; res.json().genre);
      }
  }
  </code></pre>
  
  <p><strong>genre.actions.ts</strong></p>
  
  <pre><code>import { Action } from '@ngrx/store';
  import { Injectable } from '@angular/core';
  
  import { Genre } from '../_shared/genre.model';
  
  @Injectable()
  export class GenreActions {
  
      static LOAD_GENRES = '[Genre] Load Genres';
      loadGenres(): Action {
          return {
              type: GenreActions.LOAD_GENRES
          };
      }
  
      static LOAD_GENRES_SUCCESS = '[Genre] Load Genres Success';
      loadGenresSuccess(genres): Action {
          return {
              type: GenreActions.LOAD_GENRES_SUCCESS,
              payload: genres
          };
      }
  
      static GET_GENRE = '[Genre] Get Genre';
      getGenre(slug): Action {
          return {
              type: GenreActions.GET_GENRE,
              payload: slug
          };
      }
  
      static GET_GENRE_SUCCESS = '[Genre] Get Genre Success';
      getGenreSuccess(genre): Action {
          return {
              type: GenreActions.GET_GENRE_SUCCESS,
              payload: genre
          };
      }
  }
  </code></pre>
  
  <p><strong>genre.reducers.ts</strong></p>
  
  <pre><code>import { Action } from '@ngrx/store';
  
  import {Genre, initialState} from '../_shared/genre.model';
  
  import { GenreActions } from './genre.actions';
  
  export function genreReducer(state: Genre = initialState, action: Action) {
      switch (action.type) {
          case GenreActions.GET_GENRE_SUCCESS: {
              return action.payload;
          }
          case GenreActions.LOAD_GENRES_SUCCESS: {
              return action.payload;
          }
          default: {
              return state;
          }
      }
  }
  </code></pre>
  
  <p><strong>genre.effects.ts</strong></p>
  
  <pre><code>export class GenreEffects {
      constructor (
          private update$: Actions,
          private genreActions: GenreActions,
          private svc: GenreService,
      ) {}
  
      @Effect() loadGenres$ = this.update$
          .ofType(GenreActions.LOAD_GENRES)
          .switchMap(() =&gt; this.svc.getGenres())
          .map(genres =&gt; this.genreActions.loadGenresSuccess(genres));
  
      @Effect() getGenre$ = this.update$
          .ofType(GenreActions.GET_GENRE)
          .map(action =&gt; action.payload)
          .switchMap(slug =&gt; this.svc.getGenre(slug))
          .map(genre =&gt; this.genreActions.getGenreSuccess(genre));
  }
  </code></pre>
  
  <p><strong>genre.detail.component.ts</strong></p>
  
  <pre><code>import { Store } from '@ngrx/store';
  import { Observable } from 'rxjs/Observable';
  import { Subscription } from 'rxjs/Subscription';
  import { ActivatedRoute, Router } from '@angular/router';
  import { Component, OnInit } from '@angular/core';
  
  import { Genre } from '../_shared/genre.model';
  import { GenreActions } from '../_store/genre.actions';
  
  @Component({
      selector: 'app-genre-detail',
      templateUrl: './genre-detail.component.html',
      styleUrls: ['./genre-detail.component.scss']
  })
  export class GenreDetailComponent implements OnInit {
  
      public idSub: Subscription;
      public genre: Observable&lt;any&gt;;
  
      constructor(
          private store: Store&lt;Genre&gt;,
          private route: ActivatedRoute,
          private genreActions: GenreActions,
          private router: Router
      ) {
          this.genre = store.select('genres');
      }
  
      ngOnInit() {
          this.idSub = this.route.params.subscribe(params =&gt; {
              this.store.dispatch(this.genreActions.getGenre(params['slug']));
              console.log(this.genre);
              });
      }
  }
  </code></pre>
  
  <p>I can see that my API request is being fired, and it is return data, I can see in the Redux devtools that state is being populated but I just can't seem to get the data out and in to my views using the normal <code>{{ genre.title }}</code> I just get <code>[Object object]</code> being thrown back at me? </p>
  
  <p>I am sure that this might be something really easy but like I said I am a total noob and have spent around 5 hours on this trying out different things following different tutorials etc. </p>
  
  <p><a href="https://i.stack.imgur.com/demWt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/demWt.png" alt="Console"></a></p>