React和Redux的连接react-redux-白红宇

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

react-redux提供两个关键模块：Provider和connect。 Provider Provider这个模块是作为整个App的容器，在你原有的App Container的基础上再包上一层，它的工作很简单，就是接受Redux的store作为props，并将其声明为context的属性之一，子组件可以在声明了contextTypes之后可以方便的通过this.context.store访问到store。不过我们的组件通常不需要这么做，将store放在context里，是为了给下面的connect用的。这个是Provider的使用示例：

// config app rootconst history = createHistory()const root = ( 
      
      
    )// renderReactDOM.render( root, document.getElementById('root'))复制代码

connect

这个模块是算是真正意义上连接了Redux和React，正好它的名字也叫connect。先考虑Redux是怎么运作的：首先store中维护了一个state，我们dispatch一个action，接下来reducer根据这个action更新state。

映射到我们的React应用中，store中维护的state就是我们的app state，一个React组件作为View层，做两件事：render和响应用户操作。于是connect就是将store中的必要数据作为props传递给React组件来render，并包装action creator用于在响应用户操作时dispatch一个action。从它的使用来说，它的API如下：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])复制代码

mapStateToProps是一个函数，返回值表示的是需要merge进props的state。默认值为() => ({})，即什么都不传。

(state, props) => ({ }) // 通常会省略第二个参数复制代码

mapDispatchToProps是可以是一个函数，返回值表示的是需要merge仅props的actionCreators，这里的actionCreator应该是已经被包装了dispatch了的，推荐使用redux的bindActionCreators函数。

(dispatch, props) => ({ // 通常会省略第二个参数 ...bindActionCreators({  ...ResourceActions }, dispatch)})复制代码

更方便的是可以直接接受一个对象，此时connect函数内部会将其转变为函数，这个函数和上面那个例子是一模一样的。 mergeProps用于自定义merge流程，下面这个是默认流程，parentProps值的就是组件自身的props，可以发现如果组件的props上出现同名，会被覆盖。

(stateProps, dispatchProps, parentProps) => ({ ...parentProps, ...stateProps, ...dispatchProps})复制代码

options共有两个开关：pure代表是否打开优化，详细内容下面会提，默认为true，withRef用来给包装在里面的组件一个ref，可以通过getWrappedInstance方法来获取这个ref，默认为false。 connect返回一个函数，它接受一个React组件的构造函数作为连接对象，最终返回连接好的组件构造函数。

React组件如何响应store的变化？

为什么connect选择性的merge一些props，而不是直接将整个state传入？

pure优化的是什么？我们把connect返回的函数叫做Connector，它返回的是内部的一个叫Connect的组件，它在包装原有组件的基础上，还在内部监听了Redux的store的变化，为了让被它包装的组件可以响应store的变化:

trySubscribe() { if (shouldSubscribe && !this.unsubscribe) {  this.unsubscribe = this.store.subscribe(::this.handleChange)  this.handleChange() }}//欢迎加入全栈开发交流圈一起学习交流：864305860handleChange () {//面向1-3年前端人员 this.setState({//帮助突破技术瓶颈，提升思维能力  storeState: this.store.getState() })}复制代码

我们connect的是某个Container组件，它并不承载所有App state，然而我们的handler是响应所有state变化的，于是我们需要优化的是：当storeState变化的时候，仅在我们真正依赖那部分state变化时，才重新render相应的React组件，那么什么是我们真正依赖的部分？就是通过mapStateToProps和mapDispatchToProps得到的。

具体优化的方式就是在shouldComponentUpdate中做检查，如果只有在组件自身的props改变，或者mapStateToProps的结果改变，或者是mapDispatchToProps的结果改变时shouldComponentUpdate才会返回true，检查的方式是进行shallowEqual的比较。所以对于某个reducer来说：

export default (state = {}, action) => { return { ...state } // 返回的是一个新的对象，可能会使组件reRender // return state // 可能不会使得组件reRender}复制代码

在connect的时候，要谨慎map真正需要的state或者actionCreators到props中，以避免不必要的性能损失。最后，根据connect的API我们发现可以使用ES7 decorator功能来配合React ES6的写法：

@connect( state => ({  user: state.user,  resource: state.resource }), dispatch => ({  ...bindActionCreators({   loadResource: ResourceActions.load  }, dispatch)//欢迎加入全栈开发交流圈一起学习交流：864305860 })//面向1-3年前端人员)//帮助突破技术瓶颈，提升思维能力export default class Main extends Component {}复制代码

结语

感谢您的观看，如有不足之处，欢迎批评指正。