@ ngrx/storeが正常に動作しない

Question

私はこのAngular 2アプリを動作させています。私は@ ngrx/storeをアプリケーションに追加しようとしていますが、動作させることはできません。ここ は、私がこれまでに持っているものです。

product.component.ts

import {Component, Input, ChangeDetectionStrategy} from "@angular/core"; 
 

 
import {ProductService} from "../index"; 
 

 
declare const module; 
 

 
@Component({ 
 
    selector: 'products', 
 
    moduleId: module.id, 
 
    providers: [ProductService], 
 
    templateUrl: '_products.component.html', 
 
    styleUrls: ['_products.component.css'], 
 
    changeDetection: ChangeDetectionStrategy.OnPush 
 
}) 
 
export class _ProductsComponent { 
 

 
    products; 
 

 
    constructor(private productService: ProductService) { 
 
     this.products = this.productService.products$; 
 
     this.productService.loadProducts(); 
 
    } 
 

 
}

product.reducer.ts

import {ActionReducer, Action} from '@ngrx/store'; 
 
import {Product} from "./index"; 
 

 
export const products: ActionReducer<Product> = (state: any = {}, action:Action) => { 
 
    switch (action.type) { 
 
     case 'ADD_PRODUCTS': 
 
      return action.payload; 
 

 
     default: 
 
      return state; 
 
    } 
 
}

プロduct.service.ts

import {Injectable} from "@angular/core"; 
 

 
import {HttpService} from "../shared/services/http.service"; 
 
import {Store} from "@ngrx/store"; 
 
import {AppStore} from "../shared/store.interface"; 
 

 
@Injectable() 
 
export class ProductService { 
 

 
    products$; 
 

 
    constructor(
 
     private store: Store<AppStore>, 
 
     private httpService: HttpService) { 
 
     this.products$ = store.select('products'); 
 
    } 
 

 
    loadProducts() { 
 
     return this.httpService.call('get', 'home') 
 
      .map(res => res.json()) 
 
      .map(payload => ({ type: 'ADD_PRODUCTS', payload })) 
 
      .subscribe(action => this.store.dispatch(action)) 
 
    } 
 

 
}

<div class="grid_products"> 
 
    {{products | async}} // shows: [object Object],[object Object],[object Object],[object Object].... 
 
    <product*ngFor="let product of products | async" [product]="product" class="grid_product alcenter"></product> // gives me errors 
 
</div>

{{製品ので、私はほとんどそこだように私は感じます|非同期}}私の結果を示しています。 * ngForが私にエラーを起こさない：

ORIGINAL EXCEPTION： 'object'タイプの異なる[object object]を見つけることができません。 NgForは、配列などのIterablesへのバインドのみをサポートしています。

私はそれが何を意味するのか理解していますが、なぜ私がこれを得るのか分かりません。残念ながら、ほとんどすべてが古い

• http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/
• Angular2 + ngrx/store for handling failure HTTP requests
• https://egghead.io/courses/building-a-time-machine-with-angular-2-and-rxjs

：私はまさにTUTOSショー...私が使用した

リンクを持っているような気が（RC5ではなく）。

更新日：私は{{製品|非同期| json}}私のHTMLファイルでは、私はすべてのデータを取得します。それは働いています、なぜ私は* ngForでこのエラーが出るのか分かりません。

Answer 1

レデューサーでは、状態をオブジェクトではなく配列に初期化する必要があります。

今あなたが

state: any = {} 

を持っているが、テンプレートが最初にHTMLをレンダリングしようとすると、オブジェクトである「製品」の初期状態を反復しようとしていること

state: any = [] 

作成し、配列ではありません。

Answer 2

はこれにあなたの減速を変更

：

import {ActionReducer, Action} from '@ngrx/store'; 
import {Product} from "./index"; 

export const products: ActionReducer<Product[]> = (state: Product[] = [], action:Action) => { 
    switch (action.type) { 

     case 'ADD_PRODUCTS': 
      state.push(action.payload); 
      return state; 

     default: 
      return state; 
    } 
}