如何将以下 HOC 实现转换为反应钩子实现

Question

我需要将以下 HOC 实现 react redux 转换为 react hook 实现我是 react hook的初学者，我发现它很吸引人，我需要替换 connect(( 函数并将调度映射到道具到调度和用户选择器

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