将 class-redux 组件转换为函数式 hooks 组件

Question

有人可以帮助我使用 React-Hooks 将这个 class 组件转换为功能组件吗？

我的 class 组件代码如下：

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

我知道我必须实现 useSelector 而不是 mapStateToProps 而不是 mapDispatchToProps 必须使用 useDispatch，但是，我有点挣扎！

提前致谢！

Answer 1

这是代码，我添加了 useCallback 以提高连击性能。并且 cart 没有在您的代码中使用，但您可以在组件

上使用 cart


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;

Answer 2

您唯一需要做的就是确保将此组件包裹在 Provider 中，您应该已经这样做了。

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

Answer 3

您可以利用 useDispatch 和 useSelector 将基于 class 的 redux 组件转换为基于函数的 redux 组件。尽管我看不到您在哪里使用 redux 状态。无论如何，我已经包括使用 useSelector 挂钩。如果您不打算在此组件中的任何地方使用 redux 状态，则可以跳过使用 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.'
        />
      </>
      );
  }

将 class-redux 组件转换为函数式 hooks 组件

Convert class-redux component to functional hooks component

javascript

reactjs

redux