在按鈕上單擊選中復選框並將數據添加到購物車中反應 redux？

Question

在這個問題中，我該怎么做才能在單擊按鈕時將 function 添加到購物車和 select 復選框一起執行？ 在當前場景中，當單擊按鈕但未選中復選框時，添加到購物車正在工作。 我刪除了所有 styles 以便實際代碼可讀

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 },
  });
};

減速器.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;
  }
}

數據.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_TO_CART"動作類型添加一個案例，並在reducer中使用action.payload中打包的id 。

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