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

知识点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

相关内容

热门资讯

上市公司要求会计师辞任被拒绝,... 董事会建议在本公司将召开的股东特别大会(「股东特别大会」)上提呈以下决议案:(i) 罢免国卫会计师事...
注销60家法人牌照、清退逾30... 随着强监管严监管持续推进,保险中介行业迎来新一轮格局重塑。国家金融监督管理总局披露的最新数据显示,2...
康芝药业(300086.SZ)... 格隆汇3月2日丨康芝药业(300086.SZ)公布,国家组织集采药品协议期满品种接续采购办公室发布《...
(新春走基层)广东潮州乡村民俗... 3月2日,广东省潮州市急水村,扛标旗的少女。扛标旗是广东潮州乡村盛行的传统民俗,由妙龄少女肩扛绣有“...
伊朗古列斯坦王宫遭袭受损 来源:央视新闻客户端总台记者获悉,位于伊朗首都德黑兰市中心的世界文化遗产——古列斯坦王宫在当地时间2...