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请求被触发了，它是返回数据，我可以在Redux 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)
}

如果您想查看ngrx 4，请查看此link

我只是挖出我的git，你可以查看我使用ngrx v2的回购快照。我没有相同的工作示例，但请放心代码工作LINK

<强>更新

为类型创建不同的对象以使用状态

中的类型接口

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

Answer 2

当前，您只获得Observable，但希望获得体裁列表。而且，这就是问题所在。您需要订阅以获得价值。

为流派设置一个不同的对象以使用处于状态的流派接口（如Rahul Singh所述）

export interface AppState {
    genre:Genre
}

constructor(private store: Store<AppState>,
    private route: ActivatedRoute,
    private genreActions: GenreActions, 
    private router: Router) {}

并在ngOnInit中订阅它以观察更改。

ngOnInit(): void {
    this.store.select(s => s.genre).subscribe(data => this.genre = data);
}

注意：ngOnInit()用于确保您使用的组件属性（例如：@Input() someId: number）已经初始化。因此，如果您使用任何组件属性，则应在ngOnInit()中进行操作。否则，constructor()可以。但是我们应该使用constructor()来设置“依赖注入”，而不要过多。 ngOnInit()是“开始”的更好位置-在此/组件的绑定被解析。

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

2 个答案: