在Redux中使用useSelector和useDispatch

Posted 2021-08-29 前端精髓

如何在redux中使用useSelector和useDispacth来获取数据。我们可以使用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的不同之处。