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,如有侵权请联系本人删除。