使用react-redux完成状态映射后props返回undefined问题求助

问题原因排查 #

核心问题是state字段名拼写不一致，还有一处可优化的潜在隐患：

• 你在Reducer的初始state里定义的蛋糕数量字段是cakeQunt，但在mapStateToProps里取值时写错成了cakeQuant（多了字母a），导致取到的值为undefined
• 你已经导入了BUY_CAKE常量，但Action和Reducer里都直接写死了字符串'BUY_CAKE'，虽然本次没有触发错误，但后续修改常量值会出现匹配失效问题

修复方案 #

1. 修改CakeContainer.js中的mapStateToProps方法 #

把取值字段改成和Reducer里一致的cakeQunt：

const mapStateToProps = (state) =>{
    return {
        cake: state.cakeQunt // 替换原来的cakeQuant
    }
}

2. （可选）统一使用常量定义Action类型 #

修改Action.js：

export const buyCake = () =>{
    return{
        type: BUY_CAKE // 替换原来的硬编码字符串
    } 
}

修改Reducer.js的case判断：

case BUY_CAKE: return {
    ...state,
    cakeQunt: state.cakeQunt - 1
}

修改后重新运行即可正常读取props里的cake值。

内容的提问来源于stack exchange，提问作者Srishti Tiwari