javascript - Angular/Redux 无法读取未定义的属性 'dispatch'

Question

我正在使用 Angular + Redux 构建一个购物应用程序。 我想要的是通过调度程序功能在点击时触发“ADD_PRODUCT”操作，但是当点击产品时我只会收到以下错误:

错误类型错误:无法读取未定义的属性“dispatch”

我在网上搜索了一下，通过在组件中添加 select 装饰器解决了类似的问题。我也是，但仍然出现此错误。

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>

我做错了什么？如何让调度程序正常工作？

Answer 1

您忘记将 private 修饰符添加到组件构造函数中的 ngRedux 参数。

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