Redux学习3 useSelector 与 useDispatch

Redux学习3 useSelector 与 useDispatch

在 react-redux 中学习了使用connect方法对ui组件进行加强，从而使得组件可以通过mapStateToProps和mapDispatchToProps来进行将 redux中的state的数据 存进props来读取和修改redux的数据，但是如果每个组件都要去利用connect方法进行加强，会太麻烦，所以reacct-redux 新版本7.1推出了hooks风格的api，可以更加简单的去操作redux的数据。

• useSelector : 读取redux的state的数据

  要注意的是必须在函数组件中使用，因为底层是hooks实现的

  import { useSelector} from "react-redux";
  
  const mapStateToProps = (state,props) => {
      console.log("ComBState",state);
      return {count: state.count};
  }
  // 函数组件c想使用redux中的数据  只需要将定义好的方法传进useSelector就可以了，上面定义的方法和使用connect方法加强时需要定义的mapStateToProps 完全一致
  function ComC() {
      const {count} = useSelector(mapStateToProps);
      return <div>{ count }</div>
  }
  

• useDispatch : 修改redux的state的数据

  useDispatch使用更加简单，会返回dispatch方法，使用返回的dispatch方法去发送对应的action就可以了。

import { useDispatch } from "react-redux";

function ComD() {
    const dispatch = useDispatch();
    return <div>
        <button onClick={ ()=>{dispatch({type: "addCount", count: 10})}} >change</button>
    </div>
}

本文参考了https://blog.csdn.net/vitaviva/article/details/104508139，如有侵权请联系本人删除。