如何在不使用“连接”的情况下在类组件中实现 bindActionCreators

Question

我正在尝试找到一种方法将此代码转换为基于类的组件：

import React, {useEffect} from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { bindActionCreators } from 'redux'
import { addComments } from './state/actions/commentActions'


export default function App() {

    const state = useSelector((state) => state)
    const dispatch = useDispatch()

    const {commentData} = state

    console.log(commentData);

    const add = bindActionCreators(addComments, dispatch)


    useEffect(() =>{
        async function fetchData(){
            const data = await fetch('https://jsonplaceholder.typicode.com/comments?_limit=10').then(data => data.json())
            add(data)
        }

        fetchData()

    }, [])

    const carr = commentData.map(data => <h1>{data.body}</h1>)

    return (
        <div>
            {carr}
        </div>
    )
}

我第一次学习redux时没有使用基于类的组件，所以我不知道如何替换connect HOC以外的那些钩子，不幸的是我已经放在了我不能使用它们的位置。那么如何在基于类的组件上实现bindActionCreators？

Answer 1

我的第一个问题是，你为什么要尝试将函数组件转换为类组件？通常，人们试图将类转换为函数:)

也就是说，为了具体回答您的问题：您不必自己致电 bindActionCreators - connect 将在内部进行：

https://react-redux.js.org/using-react-redux/connect-mapdispatch#defining-mapdispatchtoprops-as-an-object

import { increment, decrement, reset } from './counterActions'

const actionCreators = {
  increment,
  decrement,
  reset,
}

export default connect(mapState, actionCreators)(Counter)