Redux mapDispatchToPropsメソッドが正常に動作していません

Question

idの値をreduxストアに追加するには、メソッドthis.props.addItemToCart(elem.id)を呼び出していますが、動作しません。値は追加されません。 は、ここで私はここに示した質問に関連しているlink to containerreducer and an action_creator code.
小抄録、です：

... 
    <Button onClick={() => this.props.addItemToCart(elem.id)}> 
       Add to Cart 
    </Button> 

....

const mapDispatchToProps = (dispatch) => ({ 
    getAPIData() { 
    dispatch(...., 
    addItemToCart(value) { 
    dispatch(addToCart(value)); 
    }, 
    removeItemFromCart(value) { 
    dispatch(removeFromCart(value)); 
    } 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(ProductsList); 

はここで減速機のコードの一部です：

const handleCart = (state = initialState.addedIds, action) => { 
    switch (action.type) { 
    case ADD_TO_CART: 
     if (state.indexOf(action.productId) !== -1) { 
     return state 
     } 
     return [...state, action.productId]; 
    case REMOVE_FROM_CART: 
     return state.filter(productId => action.productId !== productId); 
    default: 
     return state 
    } 

}; 

Answer 1

アクション作成者はアクションにproductIdプロパティを作成しないため、常にundefinedになります。

if (state.indexOf(action.productId) !== -1) { 

あなた自身のコードを読んでください（この質問には含まれていません）。商品IDの値をaction.payloadに設定します。したがって、それに応じて減速機のコードを変更してみてください。

if (state.indexOf(action.payload) !== -1) { 

Answer 2

mapDispatchToPropsの書き方が間違っています。それはこのようなものでなければなりません。

function mapDispatchToProps(dispatch) { 
    return { 
     addItemToCart: bindActionCreators(addToCart, dispatch), 
     // Other actions should go here ... 
    }; 
} 

そして、それは

this.props.addItemToCart(values); 

最後に、このような接続ヘルパーに渡し、それゆえアクションが使用して呼び出すことができ、小道具にあなたの行動をバインドします。

export default connect(mapStateToProps, mapDispatchToProps)(ProductsList); 

希望します。ハッピーコーディング！