Redux开发购物车遇TypeError: dispatch不是函数，求解决

错误原因 #

1. Action未绑定Redux的dispatch：addToCart是高阶函数形式的actionCreator，必须通过Redux的connect或钩子注入dispatch才能正常工作，否则内部无法获取dispatch函数。
2. 点击事件触发时机错误：onClick={addToCart(product)}会在组件渲染时立即执行函数，而非点击时触发，导致传递给onClick的不是事件处理函数。
3. Reducer数组处理错误：action.payload是单个产品对象，[...state, ...action.payload]会把对象属性拆解到数组中，破坏state结构。
4. ActionCreator计算逻辑错误：item.count大概率不存在，用它计算sum会得到NaN。

修复步骤 #

1. 为组件绑定Redux的dispatch #

用react-redux的connect函数包装Products组件，自动将dispatch注入actionCreator：

import { connect } from 'react-redux';
import { addToCart } from '../path/to/your/actionCreators'; // 替换为实际路径

// ... 你的Products组件代码 ...

// 绑定dispatch到addToCart，传入组件props
const mapDispatchToProps = {
  addToCart
};

// 替换原export语句，用connect包装组件
export default connect(null, mapDispatchToProps)(Products);

2. 修正点击事件写法 #

将直接执行函数改为点击时才触发的函数：

onClick={() => addToCart(product)}

3. 修复Reducer的数组处理逻辑 #

调整reducer中添加元素的方式：

case ADD_TO_CART:
  return [...state, action.payload]; // 去掉payload前的扩展运算符

4. 修正ActionCreator的总价计算 #

用手动设置的count:1计算总价，避免使用不存在的item.count：

export const addToCart = (item) => (dispatch) => {
  const product = { 
    ...item, 
    count: 1, 
    sum: item.prices[0].amount // count为1，直接取商品价格即可
  };
  dispatch({
    type: ADD_TO_CART,
    payload: product,
  });
};

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