一、直接和redux联系

如图所示，redux直接某个类组件联系，这里我们可以看到，在组件创建成功后需要订阅redux，在卸载的时候还要自己手动取消订阅。当多个组件需要使用redux，我们可以看到重复的逻辑代码真的是太多太多了，像监听订阅、取消订阅每个页面都要写。这里小伙伴可能直接想到了react-redux为我们提供的connect高阶函数，那你真的明白该函数内部是怎么执行的么，接下来我将实现一个简单的connect。

二、使用connect高阶函数

当我们使用connect函数的之前，我们都需要定义mapStateToProps、mapDispatchToProps两个函数作为connect高阶函数的参数，自身组件则作为conncet高阶函数返回的函数的参数。

三、开始简单的connect

我们可以看到其实就是一个普通的函数，返回一个高阶函数。还记得我们使用connect之前定义的mapStateToProps参数么，它依赖一个state，在第9行我们可以看到我们通过函数的调用把store.getState()方法返回给它了，所以state就等于store.getState()方法，由此而知mapDispatchToProps接收的dispatch也是我们所返回的store.dispatch，你是否会困惑state中的值为啥是mapStateToProps(store.getState())?拿我这个案例来看，我上面返回的是counter:state.counter，因此我们在state里面获取的数据应该是{counter:0},这就可以根据我们传入的mapStateToProps传入的参数动态获取redux，最后把原本的props传递回去，在把我们所依赖的也传递回去。

四、过于依赖store的缺陷

可以看到该文件太过于依赖store，在实际的库中我们不可能要求用户来修改我们自己的源代码从而引入store，因此我们需要用到context全局共享store，因此我们可以先创建一个context对象，在main中包裹APP组件并把store传递。

在main中使用

修改connect高阶函数

因此一个简单的connect高阶函数就被实现了，为什么在state里面不使用this.context而去使用context，因为在this.state中this.context还没有值，我们需要让super第二个参数为context，在state里面就可以获取到值，具体的过程看源码把哈哈哈哈。

使用redux提供的connect

我们只需要把导入的connect换一下，在main中的storeContext换成redux提供的provider且value换成store就Ok了。