Question

我需要将以下React Redux的HOC实现转换为React钩子实现 我是React钩子的初学者，我发现它很着迷，我需要替换connect（）函数，并将派发映射到道具到派发和userSelector

    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)

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());
}, []);

如何将以下HOC实现转换为React Hook实现

1 个答案: