网站建设程序制作,阿里云搭建安装wordpress教程,ui kits,制作网页用dic知识点06-redux的hook
在函数组件中要和redux连接#xff0c;分为两个步骤
前提状态机已经主备就绪 注入store到根组件 在函数组件中#xff0c;使用Provider包裹根组件#xff0c;并将store注入这一步#xff0c;依旧是不能少的 import store from ./redux/store…知识点06-redux的hook
在函数组件中要和redux连接分为两个步骤
前提状态机已经主备就绪 注入store到根组件 在函数组件中使用Provider包裹根组件并将store注入这一步依旧是不能少的 import store from ./redux/storeimport { Provider } from react-reduxReactDOM.render(Provider store{store}App //Provider,document.getElementById(root));在函数组件中需要使用第三方的hook来完成状态机获取 在类组件中我们要获取redux中的数据使用的方法是先引入 connect高阶函数传入一个 mapStateToProps作为其参数并在mapStateToProps函数中将redux中的值返回出去以这样的的形式来获取redux中的数据。 在函数组件中提供了一种比上面使用起来更加方便的方式也就是使用redux中的一些hook函数来实现redux中数据的获取 useDispatch:产生一个disptach对象派发action useSelector:作用类似于mapStateToProps获取到状态机state对象对数据进行刷选 import {useDispatch,useSelector} from react-reduximport {incrementAC,decrementAC,addCartAC} from ../../redux/actionsconst dispatch useDispatch()//使用useSelector获取到redux的数据const {courseList,cartList} useSelector(state({courseList:state.shopRD.courseList,cartList:state.shopRD.cartList}))//使用dispatch派发actionconst addCart (index,id){dispatch(addCartAC(index))}Items productList{courseList} addCart{addCart}/Items官方提供的hookuseState、useEffect、useRef、useMemo、useCallback扩展 第三方提供useHistory、useParams、useLocation、useSelector、useDispatch
