在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的不同之处。
评论
探寻 Redux useSelector 更新机制
(给前端大全加星标,提升前端技能)一个似乎无法实现的 hook 的内部工作原理深入研究当一个 react context 更新的时候,所有使用到该 context 的组件也会更新。但如果每次 redux store 一有变化,所有用到 react-re...
尼伯特
0
SwaggerSpringBootStarter在 spring-boot 中使用 swagger
在spring-boot中使用swagger,可以实现对代码无侵入地集成swagger使用时的项目配
SwaggerSpringBootStarter在 spring-boot 中使用 swagger
0
Gumba在命令行中使用 coffeescript
Gumba可以让你在命令行中使用coffeescript和underscore.string,你可以把它想象成是awk和sed的高级变种。
Gumba在命令行中使用 coffeescript
0