如何在单个onClick事件中触发两个Redux Action

你只需要在按钮的点击回调里连续调用dispatch方法，分别触发两个Action即可，下面是两种具体实现方式：

方式一：直接在onClick回调中连续触发 #

修改按钮的onClick箭头函数，依次调用两次dispatch：

<button
  className="button"
  onClick={() => {
    // 先触发cartHandler
    dispatch(cartHandler(data.product_id));
    // 再触发totalHandler，这里假设需要传入商品价格，可根据实际需求调整参数
    dispatch(totalHandler(data.product_price));
  }}
>
  Add to Cart
</button>

方式二：抽成独立处理函数（更易维护） #

如果逻辑后续可能扩展，建议把点击逻辑抽成单独的函数，代码结构更清晰：

const Detail = () => {
  const { id } = useParams();
  const dispatch = useDispatch();
  let data = useSelector((state) => state.data.DUMMY_DATA);
  data = data.filter((val) => val.product_id === id);
  data = data[0];

  // 独立的点击处理函数
  const handleAddToCart = () => {
    dispatch(cartHandler(data.product_id));
    dispatch(totalHandler(data.product_price));
  };

  return (
    <div className="detail_wrapper">
      {/* 其他原有代码保持不变 */}
      <button className="button" onClick={handleAddToCart}>
        Add to Cart
      </button>
    </div>
  );
};

注意：如果totalHandler不需要传递参数，直接调用dispatch(totalHandler())即可。

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