listview在成功添加后没有得到更新

Question

开发angular2seedadvanced的应用程序并尝试在添加新项目后实现ngrx / store它将在我的数据库中成功更新但我的视图将不会更新.new到ngrx和typescript。我正在关注

• http://bodiddlie.github.io/ng-2-toh-with-ngrx-suite/

我的代码文件在这里。

reducer.ts

 export default function HeroReducer(state = initialState, action: Action): HeroListState {
switch (action.type) {
    case HeroActions.LOAD_HEROES_SUCCESS: {
        return action.payload;
    }
    case HeroActions.ADD_HERO_SUCCESS: {

        return [...state, action.payload];
    }
}

action.ts

export class HeroActions {

static ADD_HERO = '[Hero] Add Hero';
addHero(hero): Action {

    return {
        type: HeroActions.ADD_HERO,
        payload: hero
    };
}

static ADD_HERO_SUCCESS = '[Hero] Add Hero Success';
addHeroSuccess(hero): Action {

    return {
        type: HeroActions.ADD_HERO_SUCCESS,
        payload: hero
    };
}
}

effect.ts

@Effect() addHero$ = this.update$
    .ofType(HeroActions.ADD_HERO)
    .map(action => action.payload)
    .switchMap(list => this.listService.addItems(list))
    .map(list => this.heroActions.addHeroSuccess(list));

component.ts

constructor() {
 this.grocerys$ = store.select('list');
}
ngOnInit() {
    this.loadItems();
    this.store.dispatch(this.heroActions.loadHeroes());
};

addGrocery() {
    this.groceryList.itemName = this.grocery;
    this.listService.addItems(this.groceryList)
        .subscribe(
        () => {
        // do nothing
        })


this.store.dispatch(this.heroActions.addHeroSuccess(this.groceryList));
    this.grocery = '';

};

view.html

<ul>
    <li *ngFor="let grocery of (grocerys$ | async)">{{grocery.name}}</li>
</ul>

我该如何解决这个问题？任何帮助都会非常明显。