开发笔记:在Redux中使用useSelector和useDispatch

如何在redux中使用useSelector和useDispacth来获取数据。我们可以使用mapStateToProps的替代方法useSelector。我们还可以使用mapDispatchToProps的替代方法useuseppatch。

之前使用mapStateToProps和mapDispatchToProps的示例。


import update_person from &＃39;./store/actions/personAction&＃39;;
import { connect } from &＃39;react-redux&＃39;;
function App(props) {
return (
<div className&＃61;"App">
<h1>Redux Tutorial</h1>
Person Name: {props.person.name}
<button onClick&＃61;{props.updatePerson}>Update Person</button>
</div>
);
}
const mapStateToProps &＃61; state &＃61;> {
return {
person: state.person
};
}
const mapDispatchToProps &＃61; dispatch &＃61;> {
return {
updatePerson: () &＃61;> {dispatch(update_person)}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(App);


看起来&＃xff0c;要同时使用mapStateToProps和mapDispatchToProps两者&＃xff0c;我们需要做很多事情。但是&＃xff0c;如果您使用useSelector和useDispatch&＃xff0c;那么它将减少您的代码&＃xff0c;并且看起来也更容易阅读。

现在使用useSelector和useDispatch的示例

import &＃39;./App.css&＃39;;
import fetch_user from &＃39;./store/actions/userAction&＃39;;
import { connect, useSelector, useDispatch} from &＃39;react-redux&＃39;;
import HookCounterSix from &＃39;./components/HookCounterSix&＃39;;
function App(props) {
const users &＃61; useSelector(state &＃61;> state.users);
const dispatch &＃61; useDispatch();
return (
<div className&＃61;"App">
<h1>Redux Tutorial</h1>
Users: <button onClick&＃61;{()&＃61;>dispatch(fetch_user)}>Fetch Users</button>
{
users.length &＃61;&＃61;&＃61; 0 ? <p>No user found!</p> :
users.map(user &＃61;> <p key&＃61;{user.id}>{user.first_name}</p>)
}
<HookCounterSix/>
</div>
);
}
export default App;


我们看到使用useSelector和useDispatch而不是使用mapStateToProps和mapDispatchToProps的不同之处。