¿Alguien podría ayudarme a convertir este componente de clase en un componente funcional usando React-Hooks?
Mi código para el componente de clase es el siguiente:
import React, {Component} from "react"; import { connect } from 'react-redux'; import PanelHeader from "components/PanelHeader/PanelHeader.js"; import ProductList from "components/ProductList/ProductList.js"; import jeans1 from "../assets/img/jeans/jeans1.jpg"; import jeans from "variables/jeans"; import { addCart } from "../redux/actions"; import { removeCart} from "../redux/actions"; class Jeans extends Component { constructor() { super(); this.state = { cart: [] } } render () { return ( <> <PanelHeader size="sm" /> <ProductList addToCart = {this.props.addCart} removeFromCart = {this.props.removeCart} products={jeans} image={jeans1} header='Jeans For Men' description='Foundation Of Contemporary Wardrobes, Whether Tailored Or Super Skinny, Straight or Slim, Biker or Destroyed, Our Denim Collection Caters To Every Style And Silhouette.' /> </> ); } } const mapStateToProps = (state)=> { return { cart: state.cart } } const mapDispatchToProps = (dispatch) => { return { addCart: (product) => {dispatch(addCart(product))}, removeCart: (product) => {dispatch(removeCart(product))} } } export default connect(mapStateToProps, mapDispatchToProps)(Jeans); Sé que en lugar de mapStateToProps tengo que implementar useSelector y en lugar de mapDispatchToProps debo usar useDispatch , sin embargo, ¡me cuesta un poco!
¡Gracias de antemano!
Aquí está el código, he agregado useCallback para el rendimiento de la masa. Y cart que no se usa en su código pero puede usar cart en componente
import React, {Component, useCallback} from "react"; import { useSelector, useDispatch } from 'react-redux'; import PanelHeader from "components/PanelHeader/PanelHeader.js"; import ProductList from "components/ProductList/ProductList.js"; import jeans1 from "../assets/img/jeans/jeans1.jpg"; import jeans from "variables/jeans"; import { addCart } from "../redux/actions"; import { removeCart} from "../redux/actions"; const Jeans = () => { const dispatch = useDispatch(); const cart = useSelector(state => state.cart); const addToCart = useCallback(product => dispatch(addCart(product)), [dispatch]); const removeFromCart = useCallback(product => dispatch(removeCart(product)), [dispatch]); return ( <> <PanelHeader size="sm" /> <ProductList addToCart = {addToCart} removeFromCart = {removeFromCart} products={jeans} image={jeans1} header='Jeans For Men' description='Foundation Of Contemporary Wardrobes, Whether Tailored Or Super Skinny, Straight or Slim, Biker or Destroyed, Our Denim Collection Caters To Every Style And Silhouette.' /> </> ); }; export default Jeans;Lo único que debe hacer es asegurarse de que este componente esté envuelto dentro de un Provider , lo que ya debería haber hecho.
// This is where you stored your redux actions, may be different in your case import { addCart, removeCart } from "actions"; import { useSelector, useDispatch } from "react-redux"; import jeans1 from "../assets/img/jeans/jeans1.jpg"; import jeans from "variables/jeans"; import PanelHeader from "components/PanelHeader/PanelHeader.js"; import ProductList from "components/ProductList/ProductList.js"; const Jeans = () => { // state unused for some reasons const cart = useSelector(state => state.cart); const dispatch = useDispatch(); const handleAddToCart = product => dispatch(addCart(product)); const handleRemoveFromCart = product => dispatch(removeCart(product)); return ( <> <PanelHeader size="sm" /> <ProductList addToCart={handleAddToCart} removeFromCart={handleRemoveFromCart} products={jeans} image={jeans1} header='Jeans For Men' description='Foundation Of Contemporary Wardrobes, Whether Tailored Or Super Skinny, Straight or Slim, Biker or Destroyed, Our Denim Collection Caters To Every Style And Silhouette.' /> </> ); }; export default Jeans;Podría utilizar useDispatch y useSelector para convertir el componente redux basado en clases en un componente redux basado en funciones. Aunque no veo dónde estás haciendo uso del estado redux. De todos modos, he incluido el uso del gancho useSelector . Si planea no usar el estado redux en ninguna parte de este componente, puede omitir el uso del useSelector .
import React from "react"; import {useSelector, useDispatch } from 'react-redux'; import PanelHeader from "components/PanelHeader/PanelHeader.js"; import ProductList from "components/ProductList/ProductList.js"; import jeans1 from "../assets/img/jeans/jeans1.jpg"; import jeans from "variables/jeans"; import { addCart } from "../redux/actions"; import { removeCart} from "../redux/actions"; export default function Jeans(){ const dispatch = useDispatch() const cart = useSelector(state=>state.cart) //Cart values can be accessed using the cart constant. const addToCartHandler = (product) =>{ dispatch(addCart(product)) } const removeFromCartHandler = (product) =>{ dispatch(removeCart(product)) } return ( <> <PanelHeader size="sm" /> <ProductList addToCart = {addToCartHandler} removeFromCart = {removeFromCartHandler} products={jeans} image={jeans1} header='Jeans For Men' description='Foundation Of Contemporary Wardrobes, Whether Tailored Or Super Skinny, Straight or Slim, Biker or Destroyed, Our Denim Collection Caters To Every Style And Silhouette.' /> </> ); }