ディスパッチをどのようにトリガーできますか？

Question

私のreduxアプリでディスパッチを開始する際に問題があります。私は派遣とをトリガーするにはどうすればよい

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; 

：

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

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

これは減速です：

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> 
    ) 
} 

子パックのコンポーネントは、部分的にこれが見えます：これは私のコンテナ/一部であり、 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}); 
}