回答react-redux有什么用

 所属分类:web前端开发

 浏览:130次-  评论: 0次-  更新时间:2022-10-31
描述:更多教程资料进入php教程获得。 “react-redux”的作用:1、将组件分为了容器组件和UI组件;2、取代redux中的“store.subscribe”监听组件...
更多教程资料进入php教程获得。

“react-redux”的作用:1、将组件分为了容器组件和UI组件;2、取代redux中的“store.subscribe”监听组件的状态变化,用于渲染组件;3、配合redux使用,使组件轻松的拿到全局状态,方便组件间的通信。

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react-redux有什么用

react-redux配合redux使用,将redux定义的store数据注入到组件中,可以使组件轻松的拿到全局状态,方便组件间的通信。使react组价与redux数据中心(store)联系起来,调用dispatch函数修改数据状态后,触发通过subscribe注册更新视图的处理逻辑,包括需要渲染的数据和更新数据的函数。

它主要用于在入口处包裹需要用到Redux的组件。本质上是将store放入context里。

因为redux和组件的耦合度太高,为了解耦,所以设计了redux。一旦我们引入了react-redux,我们便不再需要使用store的subscribe自己去订阅状态了。UI组件就像普通组件一样内部没有redux的身影。可读性更高。

01.png

作用1

将组件分为了容器组件和UI组件,UI组件通过props来获取状态和操作状态的方法。

作用2

通过Provider组件来取代redux中的store.subscribe来监听组件的状态变化,用于渲染组件。

作用3

在容器组件中通过核心API connect来连接UI组件和redux,connect是一个高阶函数,第一个参数接收的是两个回调函数,回调函数1:将接收一个state,然后返回一个对象对象中包含了UI组件想要的状态。回调函数2:接收一个dispatch,返回一个对象,对象中包含了UI组件想要操作状态的方法。同时还有一个简写方法,就是第二个参数直接传入一个对象,该对象包含操作状态的方法。(核心:就是将state和dispatch映射到UI组件的props中)

核心代码

export default connect(
    state => ({count: state}),
    dispatch => {
        return {
            increment: number => dispatch(increment(number)),
            decrement: number => dispatch(decrement(number)),
        }
    }
)(Counter)
登录后复制

下面是简写形式

export default connect(
    state => ({count: state}),
    {increment,decrement}
)(Counter)
登录后复制

推荐学习:《react视频教程》

以上就是react-redux有什么用的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: react,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!