react-redux 中的Provider和connect

一、Provider 和connect 的作用

Provider: Provider的作⽤是从最外部封装了整个应⽤，并向connect模块传递store

connect: 负责连接React和Redux

-- 函数签名 connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

--实际上是一个高阶组件

 

二、connect 的手动实现（直接上代码）

 

1、先定义这两个方法

 

 

 2、实现connect 方法

 

 

 

 

 

三 Provider （同React中context作用一样)

 

 

 

 

四、工作流程

1、获取state: connect通过context获取Provider中的store， 通过store.getState()获取整个store tree 上所有state

2、包装原组件: 将state和action通过props的⽅式传⼊到原组件内部wrapWithConnect返回⼀个ReactComponent对象Connect，Connect重新render外部传⼊的原组件WrappedComponent，并把connect中传⼊的mapStateToProps, mapDispatchToProps与组件上原有的props合并后，通过属性的⽅式传给WrappedComponent

3、 监听store tree变化: connect缓存了store tree中state的状态,通过当前state状态和变更前state状态进⾏⽐较，从⽽确定是否调⽤ this.setState() ⽅法触发Connect及其⼦组件的重新渲染