react-redux之connect方法

connect作用：连接React组件与 Redux store。
connect是一个高阶函数（函数返回函数），它的最终返回值是一个组件，这个组件最终“连接”好了顶层组件Provider提供的store数据。

connect真正连接的是容器型组件，容器型组件主要关注业务逻辑的处理，比如从服务器拉取数据，进行数据校验等。
容器组件处理好的数据再通过props传递给需要使用的展示型组件，展示型组件是关注界面渲染的组件。

使用 connect() 前，需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中。

容器组件还能分发（参数dispatch) action。可以定义 mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示组件的 props 中的方法。

const mapStateToProps = state => ({
    alertsList: state.scratchGui.alerts.alertsList
});

const mapDispatchToProps = dispatch => ({
    onCloseAlert: index => dispatch(closeAlert(index))
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Alerts);

const mapStateToProps = state => ({
    isRtl: state.locales.isRtl
});

export default connect(
    mapStateToProps
)(Modal);

Provider提供的是一个顶层容器的作用，实现store的上下文传递。connect之所以会成功，是因为Provider组件。

mapStateToProps

这个函数允许我们将store中的数据作为props绑定到组件上。

const mapStateToProps = (state) => {
  return {
    count: state.count
  }
}

这个函数的第一个参数就是 Redux 的store，我们从中摘取了count属性。因为返回了具有count属性的对象，所以MyComp会有名为count的props字段。

class MyComp extends Component {
  render(){
    return <div>计数：{this.props.count}次</div>
  }
}

const Comp = connect(...args)(MyComp);

当然，你不必将state中的数据原封不动地传入组件，可以根据state中的数据，动态地输出组件需要的（最小）属性。

const mapStateToProps = (state) => {
  return {
    greaterThanFive: state.count > 5
  }
}

mapDispatchToProps

connect 的第二个参数是mapDispatchToProps，它的功能是，将action作为props绑定到MyComp上。