React和Redux的链接react-redux

以前一直在探索React相关的东西，手上有个SPA项目，因而准备上Redux试试水。Redux自己和React并无之间的关联，它是一个通用Javscript App模块，用作App State的管理。要在React的项目中使用Redux，比较好的方式是借助react-redux这个库来作链接，这里的意思是，并非没有react-redux，这两个库就不弄一块儿用了，而是说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 root const history = createHistory() const root = ( <Provider store={store} key="provider"> <Router history={history} routes={routes} /> </Provider> ) // render ReactDOM.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。

好了，详细看看connect这个模块作了什么。先从它的使用来讲，它的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() } } handleChange () { 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) }) ) export default class Main extends Component { }

做者：leozdgao 连接：https://www.jianshu.com/p/94c988cf11f3 来源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。