原理图
(改图截自b站尚硅谷up)
用法介绍
1.常用参数详解connect([mapStateToProps],[mapDispatchToProps])
a.mapStateToProps该函数允许我们将store中数据作为props绑定到组件上
const mapStateToProps = (state) => { return { count: state.count } } //获取方式 this.props.count
b.mapDispatchToProps该函数用来将 action 作为 props 绑定到组件上
/* mapStateToProps函数返回的是一个对象 返回的对象中key作为传递ui组件的props的key，value作为传递给ui组件props的value mapStateToProps用于传递方法 */ function mapDispatchToProps(dispatch){ return { jia:number=>dispatch(createIncrement(number)), jian:number=>dispatch(createDecrement(number)), syncjia:number=>dispatch(createAsyncIncrement(number,500)) } } // 使用connect()()创建并暴露一个count容器组件 export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
原理解析
首先connect之所以会成功，是因为Provider组件，在原应用组件上包裹一层，使原来整个应用成为Provider的子组件，接收Redux的store作为props，通过context对象传递给子孙组件上的connect
Connect做了什么
它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。
