1

Tengo un proyecto de un restaurante donde el mesero pueda seleccionar los alimentos y que se vayan agregando al carrito de compras cuando le de click al boton add +. No se como puedo hacerle para que el mesero le de agregar se vayan agregando al carrito de compras y que pueda eliminar o agregar más del mismo producto.

import React from 'react';
import BreakfastMenu from '../components/breakfastm.json'


 class ProductCard extends React.Component{

    render(){  
        return(
 <div className="product-card-container">
             {BreakfastMenu.map((menuDetail, index) =>
              <div key={index}>
                <div className="product-card-top" style={{backgroundImage:`url(${menuDetail.image})`}}>
                    <div className="product-card-price">
                        <div className="price-sign">
                            <h4>$ </h4>
                        </div>
                        <div className="price-amount">
                            <h4>{menuDetail.price}</h4>
                        </div>
                    </div>
                </div>
                <div className="product-card-bottom">
                    <div className="card-bottom-wrapper">
                        <div className="card-bottom-inside">
                            <div className="product-title">
                                <h5>{menuDetail.name}</h5>
                            </div>
                            {console.log(menuDetail.name)}
                        </div>

                    </div>

                </div>
                       <button>Add + </button>

                </div>
             )}
            </div>
        )
    }

}
1
  • necesitas hacer un store/estado que este conectado al menu y y al carrito de compras, es decir, un componente donde puedas tener ese estado y de ahi llames a los componentes carro de compra y menu, y pasarle como props la informacion, react hooks o redux podria facilitarte mucho esto el 15 may. 2019 a las 15:05

1 respuesta 1

0

Tienes un problema común que es un conjunto de datos compartidos entre distintos componentes sin importar su jerarquía o si están en una, además de sincronizarlos cuando cambie un dato del conjunto.

Este problema lo resuelve la arquitectura Flux, en la cual el flujo de los datos es unidireccional. Los conceptos clave son:

  • store: conjunto de datos que serán usados por cualquier componente dentro de la aplicación.
  • action: es un agente que notifica que se realizará una acción determinada. Una acción tiene su propio nombre y payload (datos que transmite).
  • reducer: es una función que ejecuta un caso de acuerdo al tipo de action, tomando los datos del action y modificando parte del store.

Tienes varias implementaciones de esta arquitectura, una de las más populares es Redux.

Redux

Redux es la impelentación de referencia de Flux cuando hablamos de React. Su implementación es relativamente sencilla, aunque se puede complicar si es la primera vez que lo usas. Te mostraré rápidamente cómo integrarlo en tu aplicación.

Initial state

Es el estado inicial de tu aplicación. Este estado es un objeto que contiene tantos datos como vaya a necesitar la aplicación. En tu caso, será un array con los productos que represente al carrito:

// state.js
export default {
  shoppingCar: []
}

Actions

Los actions o acciones, son simplemente funciones que retornan un objeto con dos claves:

  • type (string): el tipo de acción.
  • payload (any): los datos que deseas insertar/eliminar/actualizar en el state.

Nota: no es necesario que uses payload como clave, pero es una buena práctica.

Es una buena práctica que en lugar de pasar strings literales pases constantes. Es decir, los nombres de las acciones es mejor guardarlas como constantes, ya que si necesitamos cambiar su nombre, al cambiarla en la constante se reflejará en todas las acciones.

// shopping-actions.js
export const addProductToShoppingCar = (id) => ({
  type: 'ADD_PRODUCT',
  payload: id
})

Reducers

Un reducer es una función que recibe dos parámetros: el estado actual y la acción. La anatomía de un reducer es:

(state = object, action = object) => object

Donde el object que se retorna es una versión modificada del estado actual ya que el estado NO SE DEBE modificar directamente.

// shopping-reducer.js
export const shoppingCarReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_PRODUCT': return {
      ...state, 
      shoppingCar: [
        ...state.shoppingCar,
        action.payload // payload representa el id del producto
      ]
    }
    case 'DELETE_PRODUCT_FROM_SHOPPING': return {
      ...state,
      shoppingCar: state.shoppingCar.filter(p => p.id !== action.payload)
    }
    default: return state // siempre debes de retornar por defecto el estado actual
  }
  return state
}

Lo último que falta es configurar Redux. Lo primero es crear el store usando los reducers y el estado inicial creados previamente:

import { combineReducers, createStore } from 'redux'
import initialState from './state'
import shoppingCarReducer from './shopping-reducer'

const reducers = combineReducers({
  shoppingCar: shoppingCarReducer
})

export default createStore(reducers, initialState) // creamos y exportamos el store

Ahora simplemete basta usar el store en el componente root de la aplicación:

// index.js
import { Provider } from 'react-redux'
import store from './store'
import App from './App'

<Provider store={store}>
  <App />
</Provider>

Para conectar un componente al store, debes usar el método connect.

Este método recibe dos parámetros:

  • mapStateToProps: función que recibe el estado y selecciona los campos del estado al cual quiere suscribirse.
  • mapDispatchToProps: no vamos a entrar en detalles.

Además, debemos de pasarle el componente que va a subscribirse.

Por ejemplo, desde ProductCard agregamos un producto al carrito, entonces, debemos conectar este componente para tener disponible el método dispatch, encargo de disparar las acciones:

class ProductCard extends React.Component {
  addToCart = (detailId) => {
    this.props.dispatch(
      addProductToShoppingCart(detailId)
    )
  }

  render() {
    return (
       ...
       <button onClick={() => this.addToCart(menuDetail.id)}>Add to cart</button>
    )
  }
}

export default connect()(ProductCard) // no necesitamos subscribirnos al estado

Y en el componente de carrito:

export default connect((state) => ({
  products: state.shoppingCart
}))(ShoppingCart)

Esto significa que cuando se agregue un producto al carrito desde ProductCard, el componente ShoppingCart se actualizará y en la propiedad products estarán disponibles los productos que se hayan agregado o quitado.

UseContext

La solución con Redux era la usada cuando React no tenía conceptos como Context API ni Hooks. Hoy en día, gracias a estas herramientas podemos alcanzar el mismo objetivo de una manera más simple.

Lo único que necesitas es un estado. Tomemos el del ejemplo con Redux:

// shopping-cart-state.js
export default {
  cart: [],
  add(id) { this.cart.push(id) },
  remove(id) { this.cart = this.cart.filter(p => p.id !== id)
}

Ahora, creamos un contexto a partir de ese estado. Esto indica que podrá ser observado y reactivo a cambios.

import shoppingCartState from './shopping-cart-sstate'

const shoppingCartContext = React.createContext(shoppingCartState)

Por último, procedemos a usarlo en los componentes:

const ProductCard = ({ product }) => {
  const { add, remove } = useContext(shoppingCartContext)

  return (
    <div>
      <h2>{product.title}</h2>
      <p>{product.desc}</p>
      <button onClick={() => add(product.id)}>Add to cart</button>
    </div>  
  )
}

--

Te sugiero la segunda forma; es más compacta, sencilla de entender e impacta menos en el rendimiento de tu aplicación.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.