React实战-深入源码了解Redux用法之Connect

React实战-深入源码了解Redux用法之Connect
Redux结构并不复杂，用法也较之Flux更为简单，使得Redux成为ReactJS的标配。虽然我并不赞成用个windows就得搞清楚windows内存/线程怎么管的，用个算法函数就要知道算法怎么写的，但是如果不去看看Redux的源码，不先了解Flux的用法，在使用Redux的时候，你会感到迷惑。再者，Redux源码并不太多，但蕴含了巧妙的设计思想，使得我们在使用Redux编码时，更加简单，比Flux的代码量少了很多，另外我们常用的Redux函数并不太多，主要有Action,Reducers,store,provider,conner等（微信：react-javascript）。
即使之前用过Flux，在使用Redux时，也会有不明就理的感觉。因为Redux为我们做了很多事情。在Redux里面，我们很少用到ReactJs
component的那些事件了，连componentDidMount、componentUnMount这些主要的事件都少见了，还有涉及数据的更像操作与事件，涉及state的操作，store中require('events').EventEmitter的事件绑定与触发等等都不知所踪，但是无论怎么变，这个数据流方式是不可改变的，这也就成为我们在学习和使用Redux过程中的雾水，让我们只知其然，不知其所以然了。
只能硬着头皮去看看Redux源码的处理方式，会让我们知道它的实现方式，写起代码来不再那么晕头晕脑了。首先是connect,为什么是它，因为这是一个将操作和数据与我们的componet进行关联的函数，成为理解Redux的一个至关重要和迷惑的函数，但是不知什么原因，在Redux的官网中并没有做为头号重心来介绍，甚至在主目录中都没有出现。
首先，看看在传统Rejeact component编码中的实现方式。
1.ReactJS + Flux中组件数据更新方式。
store中的事件如下：
 addChangedListener(callback)
  {
    this.on(CHANGE_EVENT, callback);
  },
  removeChangedListener(callback){
    this.removeListener(CHANGE_EVENT, callback);
  }
component中的事件与数据更新方式：
var PersionList= React.createClass({
  getInitialState: function () {
    return getPersions();
  },
  componentDidMount(){
    PersonStore.addChangedListener(this._onChange);
  },
  componentWillUnmount(){
    PersonStore.removeChangedListener(this._onChange);
  },
  onSearch()
  {
    PersonAction.searchByName(this.refs.organizeName.getValue());
  },
  _onChange(){
    this.setState(getPersons());
  },
  render()
  {
    return (
      <div >
        <div className="search">
          <TextField name="personName" ref="personName"/>
          <RaisedButton label="search" primary={true} onClick={this.onSearch}/>
        </div>
        <div className="list">
          <PersonList organizes={this.state.persons}/>
        </div>
      </div>
    );
  }
});
2.在Redux中的实现方式
let AddTodo = ({ dispatch }) => {
  let input
  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)
以上可以看出采用connect方式省去了很多代码和操作，数据更新不需要自己主动触发了，事件处理不需要自己去绑定和解除绑定了。但是任何事都有利有弊，如同我们采用java编码，一上来就来个eclipse，自动生成一大堆的文件，顿时蒙了，不如自己写个helloworld.java清晰。
上面的connect更是莫名其妙了，数据、事件全没有，componnet怎么实现事件提交、数据更新的？！
3.Redux中connect源码分析
还是看看一般的connect的写法吧。
function mapStateToProps(state) {
  return { todos: state.todos }
}
 
function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
扩展的参数就暂时不说了，主要是mapStateToProps，mapDispatchToProps。
mapStateToProps：负责将state中的有用数据，外加组件自生的props传人关联组件。
mapDispatchToProps：主要负责传人组件关联的事件，这里暂时也不讲reduce事件了。
理解这两点，好像有点明白了，对于一个ReactJS组件，能获得组件的数据，绑定事件函数，似乎就足够了。但是问题来了，在传统方法中，我们还会绑定数据的更新操作，这里没有reactJS的state数据变化引起的组件重绘，更奇怪的是代码2中connect参数为空？！
还是看看connect的源码实现吧：
export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
.......
return function wrapWithConnect(WrappedComponent) {
.......
}
}
以上是connect的函数主题结构。可以看出connect是采用了闭包的方式实现了两次操作。
a.第一次：实现对mapStateToProps, mapDispatchToProps, mergeProps, options = {}等输入参数的处理。
mapStateToProps的处理方式：
进一步往里看，我们可以到对mapStateToProps参数的处理
const defaultMapStateToProps = state => ({})；
const mapState = mapStateToProps || defaultMapStateToProps；
这里可以看出对mapStateToProps是有默认值处理的，如果mapStateToProps为空或者null，则默认为{}了。
mapDispatchToProps的处理方式：
const defaultMapDispatchToProps = dispatch => ({ dispatch })
 mapDispatch = defaultMapDispatchToProps
这里可以看出对mapDispatchToProps是有默认值处理的，如果mapDispatchToProps为空或者null，则默认为{
dispatch }了。
其它参数类似处理了，看到这里，我们至少明白了代码2中为什么为空了。
因为componet只是添加操作，不需要数据绑定，所有参数为{}，事件为submit中执行dispatch(addTodo(input.value))，参数应为{dispatch}。如果采用完整的方式，应该为：
AddTodo = connect({}，{dispatch})(AddTodo)才对。
而看看connect
源码知道，为null和不为null的结果是一样的。因此采用AddTodo = connect()(AddTodo)的方式了。
 
b.第二步才是真正建立commponent与数据源以及事件的关联。
在采用Redux的代码中我们看不到事件绑定与解除绑定，根本原因是connect已经我们的component自己生成了新的组件，已经不再是以前你定义的组件了，在新的组件中增加了事件操作等。看看connect源码：
return function wrapWithConnect(WrappedComponent) {
......
class Connect extends Component {
      shouldComponentUpdate() {
        return !pure || this.haveOwnPropsChanged || this.hasStoreStateChanged
      }
........
 componentDidMount() {
        this.trySubscribe()
      }
componentWillUnmount() {
        this.tryUnsubscribe()
        this.clearCache()
      }
}
}
从上面的代码可以看出，新创建的component中这些事件操作全了。
迷雾是不是少了很多，更多细节需要我们更加深入了解，跟随函数调用顺序，深入代码中，你会对框架的结构更加清楚。