react-redux的作用是什么
这篇文章主要介绍了react-redux的作用是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react-redux的作用是什么文章都会有所收获,下面我们一起来看看吧。
创新互联建站是专业的尧都网站建设公司,尧都接单;提供做网站、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行尧都网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
“react-redux”的作用:1、将组件分为了容器组件和UI组件;2、取代redux中的“store.subscribe”监听组件的状态变化,用于渲染组件;3、配合redux使用,使组件轻松的拿到全局状态,方便组件间的通信。
本教程操作环境: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的身影。可读性更高。
作用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-redux的作用是什么”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“react-redux的作用是什么”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
网站栏目:react-redux的作用是什么
文章URL:http://ybzwz.com/article/jhpjjg.html