在按钮上单击选中复选框并将数据添加到购物车中反应 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;
  }
}