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

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;

CodePudding user response：

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;

CodePudding user response：

<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>