Redux mapDispatchToProps方法無法正常工作

我正在調用方法this.props.addItemToCart(elem.id)以便將id值添加到redux存儲區，但它不起作用。沒有值被添加。這裏有一個link to containerreducer and an action_creator code.
小摘要，所涉及到的問題，我在這裏展示：Redux mapDispatchToProps方法無法正常工作

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

};

來源

2017-07-03 Taras Yaremkiv

您應該包含'Button'組件的完整代碼。你確定'this.props'是指傳入的道具嗎？這是在類組件的'render'方法嗎？ –

是的，我使用控制檯登錄方法檢查，它將一個值傳遞給控制檯 –

你的代碼不是[mcve]。所以不可能回答你的問題。 –

您的動作創建者不會在動作上創建productId屬性，因此這總是undefined。

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

閱讀你自己的代碼（你沒有包括在問題中）。您將產品ID值設置爲action.payload。因此，請嘗試相應地更改減速器代碼。

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

來源

2017-07-03 10:09:09

代碼中還可能存在其他錯誤。我還沒有運行它，並且由於某些功能依賴於未知的babel插件，例如'babel-plugin-transform-class-properties'，所以如果沒有相同的構建環境，就不可能重現。 –

babel-plugin-transform-class-properties - 這是TC39提議的第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);

希望這會有所幫助。快樂編碼！

來源

2017-07-03 09:32:51

因爲所有其他方法工作正常，所以Ir很奇怪。順便說一句我寫的風格mapdispatchtoprops我從FrontendMasters課程=完整介紹到React V3 https：//btholt.github。io/complete-intro-to-react/ –

他使用ES2015方法速記語法。這不是常見的做法，但它應該給出與答案相同的結果。 –

試試這個，看看它是怎麼回事。如果沒有，你必須登錄不同的地方，看看錯誤在哪裏。 –

Redux mapDispatchToProps方法無法正常工作

回答

相關問題