On button click check the checkbox and add the data into cart in react redux?

Question

In this problem what can I do so that the on clicking the button, both the function add to the cart and select the checkbox executes together? In the current scenario add to cart is working when the button is clicked but the checkbox isn't selected. I removed all the styles so that the actual code is readable

YourItems.js

import React from "react";
import { connect } from "react-redux";
import { addOn } from "./data";
import { addOnhandleChange,addOnSelector} from "./AddOnActions";

const YourItems = ({ addOnhandleChange, addOnSelector, selectedId }) => {
  return (
    <div>
      {addOn.map(({ id, name, img, price, unit }) => {
        return (
          <div key={id}>
            <div>
              <img src={img} alt={name} />
              <p>{name}</p>
              <span>Rs. {price}</span>
              <input
                type="checkbox"
                checked={id === selectedId}
                onChange={() => addOnhandleChange(id)}
              />
            </div>
              <button onClick={() =>addOnSelector({id, name,img,price,unit, })}>
                Add
              </button>
          </div>
        )})}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    selectedId: state.addOn.selectedId,
  };
};

export default connect(mapStateToProps, { addOnSelector,addOnhandleChange})(YourItems);

AddOnAction.js

export const addOnhandleChange = (id) => (dispatch) => {
  dispatch({
    type: "SELECTED_ID",
    payload: id,
  });
};

export const addOnSelector = ({ id, name, img, price, unit }) => (dispatch) => {
  dispatch({
    type: "ADD_TO_CART",
    payload: { id, name, img, price, unit },
  });
};

reducer.js

const initialState = {
  selectedId: "",
};

export default function SelectorReducer(
  state = initialState,
  action
) {
  switch (action.type) {
    case "SELECTED_ID":
      return {
        ...state,
        selectedId: action.payload,
      };

    default:
      return state;
  }
}

data.js

export const addOn = [
  {
    id: 12654,
    img: "https://images.pexels.com/photos/1132047/pexels-photo-1132047.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
    name: "Banana",
    price: 10,
    unit: 1,
  },
  {
    id: 2256435,
    img: "https://images.pexels.com/photos/1132047/pexels-photo-1132047.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
    name: "Mango",
    price: 20,
    unit: 1,
  },
  {
    id: 3429684,
    img: "https://images.pexels.com/photos/1132047/pexels-photo-1132047.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
    name: "Grape",
    price: 30,
    unit: 1,
  },
];

Answer 1

Add a case for "ADD_TO_CART" action type and use the id packed in action.payload in the reducer.

export default function SelectorReducer(
  state = initialState,
  action
) {
  switch (action.type) {
    case "SELECTED_ID":
      return {
        ...state,
        selectedId: action.payload,
      };

    case "ADD_TO_CART":
      return {
        ...state,
        selectedId: action.payload.id, // <-- use the payload.id
      };

    default:
      return state;
  }
}