connect方法详解

Posted 2020-09-07

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}>从这里来的。
// state.counter 里的counter是怎么来的呢？是从reducer文件内引入的。
    );
    
})(Counter)；  //这个Counter是 UI 组件，export default的内容就是由 React-Redux 通过connect方法自动生成的容器组件

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