您的位置是:网站首页>Javascript编程Javascript编程

redux如何关联react?

少儿编程网2021-04-06 17:31:55Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介在react中可以react-redux库来关联redux;react-redux提供了一些封装,可以以一种更科学的代码组织方式,让我们更舒服地在React的代码中使用Redux。该方法适用于所有品牌的电脑。Redux本身和React并没有之间的关联,它是一个通用JavscriptApp模块,用做A

版权所有:https://wWw.pxcodeS.com

在react中可以react-redux库来关联redux;react-redux提供了一些封装,可以以一种更科学的代码组织方式,让我们更舒服地在React的代码中使用Redux。Cgw少儿编程网-https://www.pxcodes.com

Cgw少儿编程网-https://www.pxcodes.com

  • 该方法适用于所有品牌的电脑。
    Cgw少儿编程网-https://www.pxcodes.com

Redux本身和React并没有之间的关联,它是一个通用Javscript App模块,用做App State的管理。要在React的项目中使用Redux,比较好的方式是借助react-redux这个库来做连接,这里的意思是,并不是没有react-redux,这两个库就不弄一起用了,而是说react-redux提供了一些封装,一种更科学的代码组织方式,让我们更舒服地在React的代码中使用Redux。Cgw少儿编程网-https://www.pxcodes.com

redux和react是怎么配合的?Cgw少儿编程网-https://www.pxcodes.com

react-redux提供connect和provider两个基友,他们connect将组件和redux关联起来,provider将store传递给组件,组件通过dispatch发出action, store根据action的type属性调用对应的reducer并传入state和这个action,reducer对state进行处理返回一个新的state放入store, connect监听到store的变化,调用setState更新组件,此时组件的props也就跟着发生变化。Cgw少儿编程网-https://www.pxcodes.com

Provider:Cgw少儿编程网-https://www.pxcodes.com

provider是一个组件,它接受store作为props,然后通过context往下传,这个react中任何组件都可以通过context获取store;Cgw少儿编程网-https://www.pxcodes.com

connect: Cgw少儿编程网-https://www.pxcodes.com

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)是一个函数,它接受四个参数并且返回一个函数—wrapWithConnect,wrapWithConnect它接受一个组件作为参数wrapWithConnect(component), 它内部定义一个新的组件connect(容器组件)并将传入的组件作为connect的子组件然后return出去。Cgw少儿编程网-https://www.pxcodes.com

mapStateToProps(state.[ownPros]):Cgw少儿编程网-https://www.pxcodes.com

mapStateToProps接受两个参数,store的state和自定义的props,并返回一个新的对象,这个对象会作为props的一部分传入UI组件。我们可以根据组件所需要的数据自定义返回一个对象,ownProps的变化也会触发mapStateToPropsCgw少儿编程网-https://www.pxcodes.com

mapDispatchToProps(dispatch,[ownProps]):Cgw少儿编程网-https://www.pxcodes.com

mapDispatchToProps如果是对象,那么会和store绑定作为props的一部分传入UI组件。如果这个函数接受两个参数,bindActionCreators会将action和dispatch绑定并返回一个对象,这个对象会和ownProps一起作为props的一部分传入UI组件,所以不论mapDispatchToProps是对象还是函数,它**终都会返回一个对象,如果是函数,这个对象的key值是可以自定义的。Cgw少儿编程网-https://www.pxcodes.com

更多编程相关知识,请访问:编程教学!!

以上就是redux如何关联react?的详细内容,更多请关注少儿编程网其它相关文章!Cgw少儿编程网-https://www.pxcodes.com

来源:php中文网Cgw少儿编程网-https://www.pxcodes.com

版权所有:https://wWw.pxcodeS.com

相关文章:

支持一下 ( )

redux如何关联react?

      匿名评论
    • 评论
    人参与,条评论
    redux如何关联react?

微信公众号

免费视频教程

先知道