React Redux报错TypeError: addSodaDrink is not a function求助

错误原因及修复方案 #

你一共存在两处核心错误，直接导致报错和后续潜在问题：

1. mapDispatchToProps写法错误（直接导致addSodaDrink is not a function报错）

你当前的写法相当于在组件初始化时就直接执行了dispatch(addSodaDrink)，把action返回的普通对象赋值给了props里的addSodaDrink，自然调用的时候会提示不是函数。
两种修复方式二选一即可：

方式1：修正函数写法

const mapDispatchToProps = dispatch => {
  return {
    // 要包裹成函数，调用时才触发dispatch
    addSodaDrink: (val) => dispatch(addSodaDrink(val))
  }
}

方式2：使用connect的对象简写（更推荐，Redux会自动帮你绑定dispatch）

直接给connect的第二个参数传对象即可，不需要自己写mapDispatchToProps：

// 直接删除你写的mapDispatchToProps，改成下面的导出写法
export default connect(mapStateToProps, { addSodaDrink })(App);

2. Reducer写法错误（会导致后续state结构异常）

你当前的reducer存在两个问题：直接修改原state的数组、返回值是数组而非完整的state对象，后续会导致state结构错乱，读取属性报错。
修复后的drinkReducer代码：

import { ADD_SODA_DRINK } from '../constants/drinkConstants';

const defaultState = {
    sodas: [],
    alcoholic: [],
    water: []
}

export const drinkReducer = (state = defaultState, action) => {
    switch (action.type) {
        case  ADD_SODA_DRINK:
            // 返回全新的state对象，不要修改原state，不要直接push原数组
            return {
              ...state,
              sodas: [...state.sodas, action.payload]
            }
        default:
            return state;
    }
}

额外可选优化

你当前的setState写法也可以简化，不需要展开整个state，React会自动合并更新的字段：

handleInput = (e) => {
  this.setState({ [e.target.name]: e.target.value })
}

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