React-Redux的使用

React-Recdux将所有的组件分为两大类：UI组件（presentational component）和容器组件（container component）
**有时候UI组件也叫：**展示组件、木偶组件、傻瓜组件、纯组件
容器组件叫：智能组件

Provider

React-Redux提供 组件，能够让整个app访问到React store中的数据

UI组件有以下几个特征：

• 只负责UI的展现，不带有任何的业务逻辑
• 没有状态
• 所有的数据都由参数（this.props）提供
• 不使用任何的Redux的API

容器组件以下几个特征：

• 负责管理数据和业务逻辑，不负责UI的展现
• 带有内部的状态
• 使用Redux的API

connect()

React-Redux提供connect()方法，用于从UI组件生成容器组件

import {connect} from "react-redux"
export default  connect()(TodoInfo)//生成容器组件

connect()(UI组件) ===>返回一个容器组件
connect()是一个HOC高阶组件，本质上是一个函数，可以接收一个组件，最终返回一个新的组件

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoInfo)

connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

mapStateToProps

mapStateToProps是一个函数，这个函数参数是state,可以让UI组件通过this.props获取到redux的状态

const mapStateToProps = state => {
    return  state.todolist
}

export default  connect(mapStateToProps)(TodoInfo)

mapDispatchToProps

mapDispatchToProps是一个函数，这个函数参数是dispatch,可以让UI组件通过this.props获取到更改redux状态

//将所有的更改redux的状态的方法全都挂载到UI组件的属性上面去，并且内部会自动的将action派发给reducer
const mapDispatchToProps = actionCreators

export default connect(null,mapDispatchToProps)(TodoInput)