How to dispatch two redux action on single onClick event - reactjs

Question

Here I am dispatching an action on button click but now I want to dispatch one more action from redux on the same button and the action which I want to dispatch is already imported on top named totalHandler so how am I supposed to do this thanks :)
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;

Answer 1

<button className="button" onClick={()=>{dispatch(cartHandler(data.product_id));dispatch(totalHandler())}}>Add to Cart</button>
OR create a function like
function Dispatch(){
dispatch(totalHandler());
dispatch(cartHandler(data.product_id));
}
<button className="button"
onClick={Dispatch}>Add to Cart</button>

Answer 2

Just add braquet at the right place {}
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;

Answer 3

One little precision because I have been struggling because of that detail, don't forget to await if necessary, in my case:
function handleClick(dice: DiceViewModel) {
return dice.isTenzies
? async () => {
await dispatch(initializeDice())
await dispatch(rollDice())
}
: () => dispatch(rollDice())
}