如何在单个 onClick 事件上分派两个 redux 操作答案

【问题标题】：How to dispatch two redux action on single onClick event如何在单个 onClick 事件上分派两个 redux 操作
【发布时间】：2023-02-04 06:01:43
【问题描述】：

在这里，我在点击按钮时发送一个动作，但现在我想在同一个按钮上从 redux 发送另一个动作，我想发送的动作已经导入到名为总处理程序那我该怎么做谢谢:)

import React from "react";
import { useParams } from "react-router-dom";
import "./ProductDetail.css";
import { useDispatch, useSelector } from "react-redux";
import { cartHandler } from "../../store/DataStore";
import { totalHandler } from "../../store/DataStore";
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];
  return (
    <div className="detail_wrapper">
      <div>
        <img src={data.product_image} alt="" className="detail_image" />
      </div>
      <div className="inner">
        <div className="detail_title">{data.product_title}</div>
        <div className="detail_description">{data.product_description}</div>
        <div className="detail_price">{data.product_price}</div>
        <button
          className="button"
          onClick={() => dispatch(cartHandler(data.product_id))}
        >
          Add to Cart
        </button>
      </div>
    </div>
  );
};

export default Detail;

【问题讨论】：

onClick={() =>{ dispatch(cartHandler(data.product_id)); dispatch(totalHandler()) } }

标签： reactjs redux react-redux

【解决方案1】：

<button className="button" onClick={()=>{dispatch(cartHandler(data.product_id));dispatch(totalHandler())}}>Add to Cart</button>

或者创建一个函数

function Dispatch(){
    dispatch(totalHandler());
dispatch(cartHandler(data.product_id));
}

<button className="button" 
onClick={Dispatch}>Add to Cart</button>

【讨论】：

【解决方案2】：

只需在正确的位置添加 braquet {}

import React from "react";
import { useParams } from "react-router-dom";
import "./ProductDetail.css";
import { useDispatch, useSelector } from "react-redux";
import { cartHandler } from "../../store/DataStore";
import { totalHandler } from "../../store/DataStore";
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];
  return (
    <div className="detail_wrapper">
      <div>
        <img src={data.product_image} alt="" className="detail_image" />
      </div>
      <div className="inner">
        <div className="detail_title">{data.product_title}</div>
        <div className="detail_description">{data.product_description}</div>
        <div className="detail_price">{data.product_price}</div>
        <button
          className="button"
          onClick={() => {dispatch(cartHandler(data.product_id)); 
           dispatch(cartHandler(data.product_id_2))}}
        >
          Add to Cart
        </button>
      </div>
    </div>
  );
};

export default Detail;

【讨论】：

【解决方案3】：

一点点精确，因为我一直在为那个细节而苦苦挣扎，如果有必要，请不要忘记await，就我而言：

  function handleClick(dice: DiceViewModel) {
    return dice.isTenzies
      ? async () => {
          await dispatch(initializeDice())
          await dispatch(rollDice())
        }
      : () => dispatch(rollDice())
  }

【讨论】：