在Redux中使用useSelector和useDispatch
如何在redux中獲取store數(shù)據(jù)。我們可以使用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，那么它將減少您的代碼，并且看起來也更容易閱讀。
現(xiàn)在使用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的不同之處。
評論
圖片
表情