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方法无法正常工作

回答

相关问题