Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

522
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda