浅谈反应和回来的的连接react-redux

　　

之前一直在探索反应相关的东西,手上有个温泉项目,于是准备上回来的试试水.Redux本身和反应并没有之间的关联,它是一个通用Javscript应用模块,用做应用程序状态的管理。要在反应的项目中使用回来的,比较好的方式是借助react-redux这个库来做连接,这里的意思是,并不是没有react-redux,这两个库就不弄一起用了,而是说react-redux提供了一些封装,一种更科学的代码组织方式,让我们更舒服地在反应的代码中使用回来的。

　　

之前仅通过回来的文档来了解react-redux,在一段时间的实践后准备翻一翻源代码,顺便做些相关的总结。我看的代码的npm版本为v4.0.0,也就是说使用的反应版本是0.14.x。

　　

react-redux提供两个关键模块:提供者和连接。

　　

<强>供应商

　　

提供者这个模块是作为整个应用的容器,在你原有容器的应用程序的基础上再包上一层,它的工作很简单,就是接受回来的的商店作为道具,并将其声明为背景的属性之一,子组件可以在声明了contextTypes之后可以方便的通过this.context.store访问到商店。不过我们的组件通常不需要这么做,将商店放在上下文里,是为了给下面的连接用的。

　　

这个是提供者的使用示例:

　　 　　//配置应用程序的根 　　const历史=createHistory () 　　const根=( 　　& lt;提供者存储键={商店}=疤峁┱摺北? 　　& lt;路由器历史={}历史路线={路线}/比; 　　& lt;/Provider> 　　）//渲染 　　ReactDOM.render ( 　　根, 　　. getelementbyid(根) 　　） 　　之前 　　 　　

<强>

　　

这个模块是算是真正意义上连接了回来的和反应,正好它的名字也叫连接。

　　

先考虑回来的是怎么运作的:首先存储中维护了一个状态,我们分派一个行动,接下来减速器根据这个行动更新状态。

　　

映射到我们的反应应用中,商店中维护的状态就是我们的应用状态,一个反应组件作为视图层,做两件事:渲染和响应用户操作。于是连接就是将存储中的必要数据作为道具传递给反应组件来呈现,并包装行动造物主用于在响应用户操作时分派一个行动。

　　

好了,详细看看连接这个模块做了什么,先从它的使用来说,它的API如下:

　　 　　 　　连接([mapStateToProps], [mapDispatchToProps], [mergeProps],[选项]) 　　 　　

mapStateToProps是一个函数,返回值表示的是需要合并进道具的状态。默认值为()=比;({}),即什么都不传。

　　 　　 　　(国家、道具)=比;({})//通常会省略第二个参数 　　 　　

mapDispatchToProps是可以是一个函数,返回值表示的是需要合并仅道具的actionCreators,这里的actionCreator应该是已经被包装了派遣了的,推荐使用回来的的bindActionCreators函数。

　　 　　 　　(调度、道具)=比;({//通常会省略第二个参数 　　…bindActionCreators ({ 　　ResourceActions… 　　},调度) 　　}) 　　 　　

更方便的是可以直接接受一个对象,此时联系函数内部会将其转变为函数,这个函数和上面那个例子是一模一样的。

　　

mergeProps用于自定义合并流程,下面这个是默认流程,parentProps值的就是组件自身的道具,可以发现如果组件的道具上出现同名,会被覆盖。

　　 　　 　　(dispatchProps stateProps parentProps)=比;（｛ 　　……parentProps, 　　……stateProps, 　　dispatchProps… 　　}) 　　 　　

选项共有两个开关:纯代表是否打开优化,详细内容下面会提,默认为真的,withRef用来给包装在里面的组件一个裁判,可以通过getWrappedInstance方法来获取这个裁判,默认为假的。

　　

连接返回一个函数,它接受一个反应组件的构造函数作为连接对象,最终返回连接好的组件构造函数。

　　

然后几个问题:

　　
    　　<李>反应组件如何响应存储的变化?李 　　<李>为什么连接选择性的合并一些道具,而不是直接将整个州传入?李 　　<李>纯优化的是什么?李 　　
　　

我们把连接返回的函数叫做连接器,它返回的是内部的一个叫连接的组件,它在包装原有组件的基础上,还在内部监听了回家的的商店的变化,为了让被它包装的组件可以响应存储的变化:

　　 　　 　　trySubscribe () { 　　如果(shouldSubscribe,,! this.unsubscribe) { 　　这一点。退订=this.store.subscribe (:: this.handleChange) 　　this.handleChange () 　　} 　　} 　　 　　handleChange () { 　　this.setState ({ 　　storeState: this.store.getState () 　　}) 　　} 　　

浅谈反应和回来的的连接react-redux