reactjs - 如何将以下 HOC 实现转换为 react 钩子实现

Question

我需要将 react redux 的以下 HOC 实现转换为 react hook 实现

    import React, { useEffect } from 'react'
    import { connect } from 'react-redux'
    import { fetchUsers } from '../actions/user.action'

    function UsersContainer ({ userData, fetchUsers }) {
    useEffect(() => {
        fetchUsers()
    }, [])
    return userData.loading ? (
        <h2>Loading</h2>
    ) : userData.error ? (
        <h2>{userData.error}</h2>
    ) : (
        <div>
        <h2>Users List</h2>
        <div>
            {userData &&
            userData.users &&
            userData.users.map(user => <p>{user.name}</p>)}
        </div>
        </div>
    )
    }

    const mapStateToProps = state => {
    return {
        userData: state.user
    }
    }

    const mapDispatchToProps = dispatch => {
    return {
        fetchUsers: () => dispatch(fetchUsers())
    }
    }

    export default connect(
    mapStateToProps,
    mapDispatchToProps
    )(UsersContainer)

标签： reactjsreact-reduxreact-hooks

Answer 1

从react-redux导入useSelector和useDispatch钩子。 并像这样使用它们：

// useSelector hook allows you to extract data from the Redux store state
const userData = useSelector(state => state.user);

// useDispatch hook returns a reference to the dispatch function from the Redux store.  
// You may use it to dispatch actions as needed.
const dispatch = useDispatch();
useEffect(() => {
  dispatch(fetchUsers());
}, []);