react-redux的Provider和Connect的引发的思考

　　react是当下非常流行的JS框架，react秉承的设计原则是一切皆组件；react-redux是react中使用redux的桥接工具，react-redux也继承react的设计原则，使用组件的形式提供服务。

　　react-redux向用户暴漏了两个核心组件，分别是Provider和Connect。相信使用过react-redux的小伙伴都不难理解Provider是组件，其实connect本质也是一个组件，即是常说的HOC组件（高阶组件），官方对connect的介绍是：“连接 React 组件与 Redux store”。

　　1、先介绍一下Provider和connect的使用常场景

　　（1）Provider的使用方法如下所示，只要把需要使用store的组件（通常是App根组件）包裹起来就可以

 <Provider store={store}>
     <App></App>
 </Provider>

　　（2）connect的使用方法如下所示，可见connect其实是一个高阶函数，接收两个参数（还有可选参数），返回一个新的函数，新的函数接收一个组件为输入，返回新的组件。这不就是react中HOC组件的定义吗，接收子组件，返回新的容器组件。由此可知，connect其实也是一个组件。

1 connect(mapStateToProps, mapDispatchToProps)(App);

　　2、下面再来看看Provider和connect是如何提供服务的：

　　（1）Provider组件有一个属性store，其接收一个用户定义的js对象作为store，给所有子组件提供state；

　　（2）connect组件接收两个属性（不考虑可选参数），mapStateToProps将store中的state转化为新的容器组件的props，mapDispatchToProps则是将redux中的action转化为新的容器组件的props，返回可使用的props的新的组件。这整个即是使用connect组件返回的新的组件。

 <connect mapStateToProps={mapStateToProps} mapDispatchToProps={mapDispatchToProps}>
     <App></App>
 </connect>

　　这个场景是不是似曾相识，没错，provider和connect的功能都是通过给自身的属性赋值，将需要的功能传递给子组件，使得子组件也拥有相应的功能；这不就是熟悉的依赖注入吗，将需要的功能通过第三方的形式提供给需要的组件，从而实现逻辑上的解耦。熟悉angular的同学可能更加清晰，angular是通过模块加载时将提前设定好的功能注入到相应的组件，react中也是一样，只不过变成了更为熟悉的组件的形式来提供服务，换句话说，provider和connect都是依赖注入的语法糖，其本质是通过引入第三方组件（这里即是Provider组件），将需要的功能通过属性的形式注入到子组件（熟悉angular的同学可自行脑补service的使用场景）。 HOC的原始需求不外乎如此，通过高阶组件将action和view进行逻辑上的解耦，从而实现view的复用。