06-redux中的hook
创始人
2024-05-30 04:58:18
0

知识点06-redux的hook

在函数组件中要和redux连接,分为两个步骤

前提状态机已经主备就绪

  1. 注入store到根组件

    在函数组件中,使用Provider包裹根组件,并将store注入这一步,依旧是不能少的

     import store from "./redux/store"import { Provider } from "react-redux"ReactDOM.render(store}>,document.getElementById('root'));
    
  2. 在函数组件中,需要使用第三方的hook来完成状态机获取

    在类组件中,我们要获取redux中的数据,使用的方法是先引入 connect高阶函数,传入一个 mapStateToProps作为其参数,并在mapStateToProps函数中将redux中的值返回出去,以这样的的形式来获取redux中的数据。

    在函数组件中,提供了一种比上面使用起来更加方便的方式,也就是使用redux中的一些hook函数来实现redux中数据的获取

    useDispatch:产生一个disptach对象派发action

    useSelector:作用类似于mapStateToProps,获取到状态机state对象,对数据进行刷选

     import {useDispatch,useSelector} from "react-redux"import {incrementAC,decrementAC,addCartAC} from "../../redux/actions"const 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))}courseList} addCart={addCart}>
    

官方提供的hook:useState、useEffect、useRef、useMemo、useCallback(扩展)

第三方提供:useHistory、useParams、useLocation、useSelector、useDispatch

相关内容

热门资讯

持续爆单!“满18减18”,有... 来源:温州都市报 “换了三拨,骑士也累了。”“我的外卖小哥说‘放到电梯里了,我按电梯了’,不送上来,...
港澳大学生逐浪海南自贸港:从骑... 中新网海口7月13日电 (黄方舟)“咔嚓、咔嚓——”清脆的快门声在海口骑楼老街的拱廊间此起彼伏,来自...
女子喝了网购现挤鲜奶高烧不退,... 转自:扬子晚报为了追求更高的营养价值,部分消费者热衷网购鲜牛奶、羊奶,多个电商平台均有售现挤鲜奶的产...
高端媒体看邯郸丨邯郸倾力实施东... 转自:邯郸网络广播电视台促进全市区域协调发展取得实质性提升邯郸倾力实施东部补短板行动今年起,邯郸市实...
每日网签 | 7月12日北京新... 转自:北京商报北京商报讯(记者 王寅浩 李晗)北京市住建委官网数据显示,7月12日北京新房网签497...
梦比优斯奥特曼中第35集希卡利... 梦比优斯奥特曼中第35集希卡利说的蓝色巨人是高斯奥特曼吗首先,从奥特世界观的角度来看,不可能,因为高...
今天18:00截止!河南公布普... 本文来自微信公众号“大象新闻”我省2025年普通高校招生普通本科提前批、体育本科批按程序投档录取后,...
外卖骑手怎么加入需要什么条件?...   现在的外卖平台越来越多,骑手也是必不可少的。目前最熟知的是美团和饿了吗,是大家经常用到的,非常受...
同城达达快递怎么叫?达达收费明...   现在配送的平台很多,在生活中也离不开大家,网上购买东西达达也可以配送,想必大家都有使用过,可以说...
追忆最初的文科人:朱光潜、伯林... 在历史上,有那么一本书,自它面世后,“人文世界”与“自然科学世界”的边界及争议也就同时形成了。这就是...