발송을 시작하려면 어떻게해야합니까?

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