Angular/Redux未定義の 'dispatch'プロパティを読み取ることができません

Question

Angular + Reduxでショッピングアプリを構築しています。 は、私が欲しいのは、ディスパッチャ機能のクリックスルーの「ADD_PRODUCT」アクションを発射することですが、私は次のエラーを取得する際に、製品上のクリック：

ERRORの例外TypeError：未定義のプロパティを読み取ることができません「派遣」

ネットで検索したところ、コンポーネントに選択デコレータを追加することで同様の問題が解決されました。私もそうでしたが、まだこのエラーが発生します。

store.ts

import { IProduct } from './product'; 
import { ADD_PRODUCT, REMOVE_PRODUCT, REMOVE_ALL_PRODUCTS } from './actions'; 

export interface IAppState { 
    products: IProduct[]; 
} 

export const INITIAL_STATE: IAppState = { 
    products[] 
} 

const productsReducer = (state=[], action) => { 
    switch(action.type) { 
     case "ADD_PRODUCT" : { 
      state = {...state, products: action.payload} 
      break; 
     } 
    } 
    console.log("Products Reducer!") 
    return state; 
} 

const cartReducer = (state=[], action) => { 
    console.log("Cart Reducer!") 
    return state; 
} 

// Reducers 
export const rootReducer =() => ({ 
    products: productsReducer, 
    cart: cartReducer 
}) 

store.component.ts

import { Component, OnInit } from '@angular/core'; 
import { NgRedux, select } from '@angular-redux/store'; 
import { IAppState } from '../store'; 
import { ADD_PRODUCT } from '../actions'; 
import { IProduct } from '../product'; 
import { Router } from "@angular/router"; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Http, HttpModule, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 

import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app-store', 
    templateUrl: './store.component.html', 
    styleUrls: ['./store.component.css'] 
}) 
export class StoreComponent implements OnInit { 

    @select() prod; 
    private products = new BehaviorSubject<any>([]); 

    product = this.products.asObservable(); 
    dataUrl = "./assets/products.json"; 
    prods: any; 

    constructor(private _http: Http, ngRedux: NgRedux<IAppState>) { } 

    getProducts(): Observable<any>{ 
     return this._http.get(this.dataUrl) 
     .map((res: Response) => res.json()); 
    } 

    ngOnInit() { 
    this.getProducts().subscribe(prods => this.prods = prods); 
    } 

    addToCart(prod){ 
    this.ngRedux.dispatch({type: "ADD_PRODUCT", payload: prod}) 
    console.log(prod.title + " added!") 
    } 

} 

store.component.html

<div class="container"> 
    <div class="row"> 
     <div *ngFor="let prod of prods" class="col-sm-4 col-md-4 col-lg-4"> 
     <div class="addBtn" (click)="addToCart(prod)">Add product</div> 
    </div> 
    </div> 
</div> 

何I間違っている？ディスパッチャを正しく動作させる方法

Answer 1

private修飾子をコンポーネントコンストラクタのngRedux paramに追加しています。

constructor(private _http: Http, private ngRedux: NgRedux<IAppState>) { } 
           ^^^^^^^