如何将class-redux类组件转换为基于React Hooks的函数式组件

转换后的React Hooks函数组件完整代码 #

import React, { useState } 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 = () => {
  // 原类组件声明的本地cart状态未在渲染逻辑中使用，后续需要可打开下方注释
  // const [cart, setCart] = useState([])

  // 替代mapStateToProps，直接从Redux store获取购物车状态
  const cart = useSelector(state => state.cart)
  // 替代mapDispatchToProps，获取action触发方法
  const dispatch = useDispatch()

  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='男士牛仔裤'
        description='作为当代衣橱的基础单品，无论是定制款、超紧身款、直筒款、修身款、机车款还是破洞款，我们的牛仔系列可适配各类风格与剪裁需求。'
      />
    </>
  )
}

export default Jeans;

核心改动说明 #

• 移除了connect高阶组件依赖，直接用Redux官方Hooks完成状态与事件的绑定，代码结构更精简
• useSelector入参和原mapStateToProps的筛选逻辑完全一致，直接返回需要的store字段，无需再通过props传递
• useDispatch直接返回dispatch实例，调用即可触发action，不需要提前做dispatch的映射绑定

内容的提问来源于stack exchange，提问作者Shpongle