在Redux中使用useSelector和useDispatch

前端精髓

共 1769字,需浏览 4分钟

 ·

2021-05-12 21:47


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


之前使用mapStateToProps和mapDispatchToProps的示例。

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


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



现在使用useSelector和useDispatch的示例

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


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


浏览 27
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报