reactjs - 如何在反应redux中单击按钮上的复选框

Question

在此问题中，如何选择按钮单击上的复选框并根据选定的复选框更新购物车值。如果用户单击第二个复选框，则还根据复选框更改购物车产品值。

在当前代码中，单击复选框是更新购物车，但如果选中另一个复选框，则购物车值会更新，但最后添加的产品仍然存在。那么如何根据按钮单击并选择复选框来同时做这两件事来添加产品

插件.js

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

动作.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: undefined,
  cart: [],
};

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

    case "ADD_TO_CART":
      const { id, img, price, name, unit } = action.payload;
      const inCart = state.cart.some((item) => item.id === id);

      if (inCart) {
        return {
          ...state,
          cart: state.cart.map((item) => (item.id === id ? { ...item } : item)),
        };
      } else {
        return {
          ...state,
          cart: [
            ...state.cart,
            { id: id, unit: unit, name: name, img: img, price: price },
          ],
        };
      }
    default:
      return state;
  }
}

标签： reactjsreduxreact-redux