Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

520
Vistas
Carrito de compras React y Redux, acción de agregar al carrito

Estoy trabajando en un carrito de compras ReactJs y Redux. El problema es que el artículo que agrego al carrito está como indefinido en el carrito y no se muestra.
Aquí está la acción para agregar al carrito:

 export const addToCart = ( { item }) => { return (dispatch) => { return ( dispatch({ type: ADD_TO_CART, payload: { id: item?.id, name: item?.name, brand: item?.brand, quantity: item?.quantity, } }) ) } }

Reductor de carro:

 const initialState = { cart: [], } export default function addToCartReducer(state=initialState, action) { switch(action.type){ case ADD_TO_CART: return { ...state, cart:[...state.cart, { id: action.payload.id, name: action.payload.name, brand: action.payload.brand, quantity: action.payload.quantity }] }; default: return state } }

Y este un fragmento de MyComponent:

 import React, { Component } from 'react' import { connect } from 'react-redux' import { addToCart } from '../Actions/actions' export class MyComponent extends Component { render(){ return( <section> <button onClick = {()=>this.props.addToCart(this.props.selectedItem)} ADD TO CART </button> </section> const mapStateToProps = (state) => { return { selectedItem: filterAttributesSelector(state), } } export default connect(mapStateToProps, {addToCart})(MyComponent) ) } }

Si inicio sesión en la consola this.props.selecteditem , todas las claves están definidas. Pero si agrego un artículo al carrito y lo registro en la consola, las claves no están definidas.
¿Podría por favor decirme qué está mal?
Gracias !

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

No puede hacer mapStateToProps en su devolución, debería causar errores. Debe agregar un mapDispatchToProps para enviar sus acciones en su caso, la acción "addToCart". tu codigo sera asi

 import React, { Component } from 'react' import { connect } from 'react-redux' import { addToCart } from '../Actions/actions' export class MyComponent extends Component { render(){ return( <section> <button onClick={()=>this.props.addToCart(this.props.selectedItem)}> ADD TO CART </button> </section> ) } } const mapStateToProps = (state) => { return { selectedItem: filterAttributesSelector(state), } } const mapDispatchToProps = (dispatch) => { return { addToCart: (item) => dispatch(addToCart(item)), }; }; export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

** Dado que envía el elemento, no es necesario destruirlo en su código de acción, debería ser así

 export const addToCart = (item) => { return (dispatch) => { return ( dispatch({ type: ADD_TO_CART, payload: { id: item?.id, name: item?.name, brand: item?.brand, quantity: item?.quantity, } }) ) } }

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda