如何从ngrx商店中获取值到我的模板中？

Question

总的来说Redux noob在这里，我有点困难从我的视图中获取我的数据用于商店。这里是我的操作，减速等

genre.model.ts

export interface Genre { 
    id: string; 
    title: string; 
    description: string; 
    slug: string; 
    error: string; 
} 

export const initialState: Genre = { 
    id: '', 
    title: '', 
    description: '', 
    slug: '', 
    error: null 
}; 

genre.service.ts

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<Genre[]>} 
    */ 
    getGenres(): Observable<Genre[]> { 
     return this.http.get(this.apiUrl + 'genres/') 
      .map(res => res.json()); 
    } 

    /** 
    * Gets an individual genre 
    * 
    * @param {String} slug 
    * @returns {Observable<Genre[]>} 
    */ 
    getGenre(slug: String): Observable<Genre[]> { 
     return this.http.get(this.apiUrl + 'genres/' + slug) 
      .map(res => res.json().genre); 
    } 
} 

genre.actions.ts

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 
     }; 
    } 
} 

genre.reducers.ts

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; 
     } 
    } 
} 

genre.effects.ts

export class GenreEffects { 
    constructor (
     private update$: Actions, 
     private genreActions: GenreActions, 
     private svc: GenreService, 
    ) {} 

    @Effect() loadGenres$ = this.update$ 
     .ofType(GenreActions.LOAD_GENRES) 
     .switchMap(() => this.svc.getGenres()) 
     .map(genres => this.genreActions.loadGenresSuccess(genres)); 

    @Effect() getGenre$ = this.update$ 
     .ofType(GenreActions.GET_GENRE) 
     .map(action => action.payload) 
     .switchMap(slug => this.svc.getGenre(slug)) 
     .map(genre => this.genreActions.getGenreSuccess(genre)); 
} 

genre.detail.component.ts

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<any>; 

    constructor(
     private store: Store<Genre>, 
     private route: ActivatedRoute, 
     private genreActions: GenreActions, 
     private router: Router 
    ) { 
     this.genre = store.select('genres'); 
    } 

    ngOnInit() { 
     this.idSub = this.route.params.subscribe(params => { 
      this.store.dispatch(this.genreActions.getGenre(params['slug'])); 
      console.log(this.genre); 
      }); 
    } 
} 

我可以看到，我的API请求正在被解雇，这是返回数据，我可以在Re中看到dux devtools状态正在填充，但我似乎无法使用正常的{{ genre.title }}获取数据并转到我的视图中，我只是将[Object object]丢回给我了？

我相信，这可能会是一件很容易的，但就像我说我是一个总的小白和花了围绕这家5小时，试图不同的东西以下不同的教程等

Answer 1

我我猜你的流派是一个阵列列表

它应该是这样的一些东西把它当作线框。

genre : any ; 

ngOnInit(){ 
this.idSub = this.route.params.subscribe(params => { 
    this.store.dispatch(this.genreActions.getGenre(params['slug'])); 
    }); 
    this.store.select('genres').subscribe(data => this.genre = data) 
} 

如果你想看着这个link

我只是挖了我的混帐，你可以检查我的使用NGRX V2的回购本快照NGRX 4的样子。我DONOT有一个工作示例为相同的，但放心代码workes LINK

UPDATE

做出不同的对象类型使用类型接口状态现在

export interface AppState { 
    genre:Genre 
} 

订阅此构造函数中的状态对象类型或ngOnInit

private store: Store<AppState>, 
private route: ActivatedRoute, 
private genreActions: GenreActions, 
private router: Router 
) { 
this.store.select('genre').subscribe(data => this.genre = data); 
}