英雄陣列不會顯示在瀏覽器上，使用Angular 4和ngrx 4

Question

我是Angular 4和ngrx 4的新手。我試圖將Angular 2 Tour of Heroes轉換爲使用ngrx 4版本的Angular 4。截至目前，我已經開始使用儀表板和英雄頁面顯示應用程序。問題是我的英雄們沒有出現，並且沒有任何錯誤出現在Chrome的開發工具上。我不確定是什麼阻止了這一點。任何提示或指導將不勝感激。

hero.actions.ts 

import { Action } from '@ngrx/store'; 

import { Hero } from './../models/hero'; 


export const GET_HEROES = '[Hero] Get Heroes'; 
export const GET_HEROES_SUCCESS = '[Hero] Get Heroes Success'; 
export const GET_HEROES_FAIL = '[Hero] Get Heroes Fail' 
export const GET_HERO = '[Hero] Get Hero'; 
export const GET_HERO_SUCCESS = '[Hero] Get Hero Success'; 
export const GET_HERO_FAIL = '[Hero] Get Hero Fail'; 
export const CREATE_HERO = '[Hero] Create Hero'; 
export const CREATE_HERO_SUCCESS = '[Hero] Create Hero Success'; 
export const CREATE_HERO_FAIL = '[Hero] Create Hero Fail'; 
export const DELETE_HERO = '[Hero] Delete Hero'; 
export const DELETE_HERO_SUCCESS = '[Hero] Delete Hero Success'; 
export const DELETE_HERO_FAIL = '[Hero] Delete Hero Fail'; 
export const UPDATE_HERO = '[Hero] Update Hero'; 
export const UPDATE_HERO_SUCCESS = '[Hero] Update Hero Success'; 
export const UPDATE_HERO_FAIL = '[Hero] Update Heo Fail'; 





export class GetHeroesAction implements Action { 
      readonly type = GET_HEROES; 
      constructor(public payload: Hero) {} 
} 
export class GetHeroesSuccessAction implements Action { 
      readonly type = GET_HEROES_SUCCESS; 
      constructor(public payload: Hero) {} 
} 
export class GetHeroesFailAction implements Action { 
      readonly type = GET_HEROES_FAIL; 
      constructor(public payload: Hero) {} 
} 
export class GetHeroAction implements Action { 
      readonly type = GET_HERO; 
      constructor(public payload: Hero) {} 
} 
export class GetHeroSuccessAction implements Action { 
      readonly type = GET_HERO_SUCCESS; 
      constructor(public payload: Hero) {} 
} 
export class GetHeroFailAction implements Action { 
      readonly type = GET_HEROES_FAIL 
      constructor(public payload: Hero) {} 
} 
export class CreateHeroAction implements Action { 
      readonly type = CREATE_HERO; 
      constructor(public payload: Hero) {} 
} 
export class CreateHeroSuccessAction implements Action { 
      readonly type = CREATE_HERO_SUCCESS; 
      constructor(public payload: Hero) {} 
} 
export class CreateHeroFailAction implements Action { 
      readonly type = CREATE_HERO_FAIL; 
      constructor(public payload: Hero) {} 
} 
export class DeleteHeroAction implements Action { 
      readonly type = DELETE_HERO; 
      constructor(public payload: Hero) {} 
} 
export class DeleteHeroSuccessAction implements Action { 
      readonly type = DELETE_HERO_SUCCESS; 
      constructor(public payload: Hero) {} 
} 
export class DeleteHeroFailAction implements Action { 
      readonly type = DELETE_HERO_FAIL; 
      constructor(public payload: Hero) {} 
} 

export class UpdateHeroAction implements Action { 
      readonly type = UPDATE_HERO; 
      constructor(public payload: Hero) {} 
} 
export class UpdateHeroSuccessAction implements Action { 
      readonly type = UPDATE_HERO_SUCCESS; 
      constructor(public payload: Hero) {} 
} 
export class UpdateHeroFailAction implements Action { 
      readonly type = UPDATE_HERO_FAIL; 
      constructor(public payload: Hero) {} 
} 

export type HeroActions 
= GetHeroesAction 
| GetHeroesSuccessAction 
| GetHeroesFailAction 
| GetHeroAction 
| GetHeroSuccessAction 
| GetHeroFailAction 
| CreateHeroAction 
| CreateHeroSuccessAction 
| CreateHeroFailAction 
| DeleteHeroAction 
| DeleteHeroSuccessAction 
| DeleteHeroFailAction 
| UpdateHeroAction 
| UpdateHeroSuccessAction 
| UpdateHeroFailAction; 



    hero.effect.ts 

    import { Action } from '@ngrx/store'; 
    import { Injectable } from '@angular/core'; 
    import { Effect, Actions, toPayload } from '@ngrx/effects'; 
    import { Observable } from 'rxjs/Observable'; 
    import 'rxjs/add/operator/takeUntil'; 

    import 'rxjs/add/operator/map'; 
    import 'rxjs/add/operator/do'; 
    import { empty } from 'rxjs/observable/empty'; 

    // import other files 
    import { AppState } from './../reducers'; 
    import { Hero } from './../models/hero'; 
    import * as heroes from './../actions/hero.action'; 
    import { HeroService } from './../services/hero.service'; 

    import { GET_HEROES, GET_HEROES_SUCCESS, GET_HEROES_FAIL, GET_HERO, GET_HERO_SUCCESS, GET_HERO_FAIL} from './../actions/hero.action'; 
    import { CREATE_HERO, CREATE_HERO_SUCCESS, CREATE_HERO_FAIL, DELETE_HERO, DELETE_HERO_SUCCESS, DELETE_HERO_FAIL } from './../actions/hero.action'; 
    import { UPDATE_HERO, UPDATE_HERO_SUCCESS, UPDATE_HERO_FAIL } from './../actions/hero.action'; 



    @Injectable() 
    export class HeroEffects { 
      constructor(private actions$: Actions, private heroService: HeroService) {} 

    @Effect() getHeroes$: Observable<Action> = this.actions$ 
    .ofType(GET_HEROES) 
    .switchMap(action => 
     this.heroService.getHeroes() 
     .map(heroes => ({type: GET_HEROES_SUCCESS, payload: heroes})) 
     .catch(() => Observable.of({type: GET_HEROES_FAIL}))); 

    @Effect() getHero$: Observable<Action> = this.actions$ 
    .ofType(GET_HERO) 
    .switchMap(action => 
     this.heroService.getHero(name) 
     .map(hero => ({type: GET_HERO_SUCCESS, payload: hero})) 
     .catch(() => Observable.of({type: GET_HERO_FAIL}))); 

    @Effect() createHero$: Observable<Action> = this.actions$ 
    .ofType(CREATE_HERO) 
    .switchMap(action => 
     this.heroService.createHero(name) 
     .map(hero => ({type: CREATE_HERO_SUCCESS, payload: hero})) 
     .catch(() => Observable.of({type: CREATE_HERO_FAIL}))); 

    @Effect() deleteHero$: Observable<Action> = this.actions$ 
    .ofType(DELETE_HERO) 
    .switchMap(action => 
     this.heroService.deleteHero(name) 
     .map(hero => ({type: GET_HERO_SUCCESS, payload: hero})) 
     .catch(() => Observable.of({type: GET_HERO_FAIL}))); 
    @Effect() updateHero$: Observable<Action> = this.actions$ 
    .ofType(UPDATE_HERO) 
    .switchMap(action => 
     this.heroService.updateHero(name) 
     .map(hero => ({type: UPDATE_HERO_SUCCESS, payload: hero})) 
     .catch(() => Observable.of({type: UPDATE_HERO_FAIL}))); 


} 

hero-list.reducer.ts 

import * as heroes from './../actions/hero.action'; 
import { Hero } from './../models/hero'; 


export type HeroListState = Hero[]; 

const initialState: HeroListState = []; 

export function heroListReducer(state = initialState, action: heroes.HeroActions): HeroListState { 
    switch (action.type) { 
    case heroes.GET_HEROES_SUCCESS: 
     return this.action.GET_HEROES_SUCCESS; 
    case heroes.CREATE_HERO_SUCCESS: 
     return [...state, this.action.CREATE_HERO_SUCCESS]; 
    case heroes.UPDATE_HERO_SUCCESS: 
     return state.map((hero) => { 
     if (hero.id === action.payload.id) { 
      return Object.assign({}, action.payload); 
     } 
     return hero; 
     }); 
    case heroes.DELETE_HERO_SUCCESS: 
     return state.filter(hero => hero.id !== this.action.DELETE_HERO_SUCCESS); 
    default: 
     return state; 
    } 
} 

Answer 1

爲了您減速

switch (action.type) { 
    case heroes.GET_HEROES_SUCCESS: 
     return action.payload; // this should not be this.action.GET_HEROES_SUCCESS; 

此外，如果你被卡住試圖轉換羣英傳遊NGRX V4。看看這個link它有一個相同的整個演示。

你可以看看這link。 它在ngrx上有一個小的演示，對ngrx 4鏈接也有更多的演示。