connect方法详解

export default connect(
  state => ({ counter: state.counter }),
)(Counter);


connect方法详解：

首先将它改写成为普通函数的写法：



export default connect(function(state){ //这里的参数state就是connect接收的外部传入的state.
//connect方法接受两个参数：mapStateToProps和mapDispatchToProps,而这里的参数state实际是mapStateToProps的参数

    return(
    counter: state.counter   //这里是创建一个从（外部的）state对象到（UI 组件的）props对象的映射关系
//这里的state是怎么来的呢？<Provider store={store}>从这里来的,provider接受参数Store，而且让Store对子组件可用.这时候  里面的子组件才能够使用方法关联store。
// state.counter 里的counter是怎么来的呢？是从reducer文件内引入的。
    );
    
})(Counter)；  //这个Counter是 UI 组件，export default的内容就是由 React-Redux 经过connect方法自动生成的容器组件<Provider>connect

connect方法生成容器组件之后，须要让容器组件拿到state对象，才能生成 UI 组件的参数。
React-Redux 提供Provider组件，能够让容器组件拿到state。
Provider在根组件外面包了一层，这样一来，App的全部子组件就默认均可以拿到state了，store放在了上下文对象context上面。而后，子组件就能够从context拿到store