Could someone help me convert this class component to functional component using React-Hooks?

My code for class component is the following:

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);

I know that instead of mapStateToProps I have to implement useSelector and instead of mapDispatchToProps must use useDispatch, however, I struggle a bit!

Thank you in advance!

CodePudding user response：

Here is the code, I have added useCallback for batter performance. And cart which are not used in your code but you can use cart on component

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;

CodePudding user response：

You could make use of useDispatch and useSelector to convert class-based redux component to functional-based redux component. Although I don't see where you are making use of the redux state. I have anyway included making use of the useSelector hook. If you're planning not to use redux state anywhere in this component, you can skip using the useSelector hook.

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.'
        />
      </>
      );
  }

CodePudding user response：

The only thing you have to do is to make sure this component is wrapped inside a Provider, which you should have already done.

// 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;