總的來說Redux noob在這裏,我有點困難從我的視圖中獲取我的數據用於商店。這裏是我的操作,減速等如何從ngrx商店中獲取值到我的模板中?
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小時,試圖不同的東西以下不同的教程等
什麼是您正在使用的ngrx版本? –
另外,當你使用效果器時,它是一個異步調用,你需要在選擇器中進行訂閱。像'select('流派')。訂閱(數據=>數據)' –
ngrx商店版本2.2。2 – ChrisBratherton