如何觸發派送？

Question

我在我的redux應用程序中觸發分派時遇到問題。這是它我的容器/部分：

render() { 
    debugger; 
    var Packs = []; 
    if (this.props.packsData != undefined && this.props.packsData.existingFoxtelPackage != undefined) { 
     if (this.props.packsData.existingFoxtelPackage.eligiblePacks.length > 0) { 

      Packs = this.props.packsData.existingFoxtelPackage.eligiblePacks; 

      console.log('testing=Packs', Packs); 
     } 
    } 

    return (
     <div>hello from Packscontainer!!! 
      <div> 
       { 
        Packs.map(pack => 
         <Pack id={pack.id} name={pack.name} addToCart={() => store.dispatch({type:'ADD_TO_CART',id:pack.id})}/> 
        )} 
      </div> 
     </div> 
    ) 
} 

孩子包組件看起來部分是：

render() { 
     const { addToCart } = this.props 
     return (
      <div>hello from pack 
       {this.props.id} - {this.props.name} 

       <button onClick={addToCart}>Add to cart</button> 
      </div> 
     ) 
    } 

這是減速機：

const initialState = { 
    cartIds: [] 
} 

const Cart = (state = initialState.cartIds, action) => { 
    switch (action.type) { 
     case 'ADD_TO_CART': 
      debugger; 
      return [...state, action.id] 
     default: 
      return state 
    } 
} 

export default Cart; 

我怎樣才能觸發與調度addToCart？

Answer 1

如果以正確的方式使用redux，dispatch將作爲道具注入到容器中。所以你的容器中的代碼應該是這樣的：

render() { 
    debugger; 
    var Packs = []; 
    if (this.props.packsData != undefined && this.props.packsData.existingFoxtelPackage != undefined) { 
     if (this.props.packsData.existingFoxtelPackage.eligiblePacks.length > 0) { 

      Packs = this.props.packsData.existingFoxtelPackage.eligiblePacks; 

      console.log('testing=Packs', Packs); 
     } 
    } 

    return (
     <div>hello from Packscontainer!!! 
      <div> 
       { 
        Packs.map(pack => 
         <Pack id={pack.id} name={pack.name} addToCart={this.onAddToCart.bind(this, pack.id)}/> 
        )} 
      </div> 
     </div> 
    ) 
} 

onAddToCart(id) 
    this.props.dispatch({type:'ADD_TO_CART',id:id}); 
}