在react-redux 框架中，给我提供了两个常用的API来配合Redux框架的使用，其实在我们的实际项目开发中，我们完全可以不用react-redux框架，但是如果使用此框架，就如虎添翼了。
我们来简单聊聊这两个常用的API
- connect()
- Provider 组件
React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。
UI 组件
UI 组件有以下几个特征。
- 只负责 UI 的呈现，不带有任何业务逻辑
- 没有状态（即不使用this.state这个变量）
- 所有数据都由参数（this.props）提供
- 不使用任何 Redux 的 API
2、因为不含有状态，UI 组件又称为"纯组件"，即它跟纯函数一样，纯粹由参数决定它的值。
下面就是一个 UI 组件的例子。
const Title =
value => <h1>{value}</h1>; 因为不含有状态，UI 组件又称为"纯组件"，即它纯函数一样，纯粹由参数决定它的值。
你可能会问，如果一个组件既有 UI 又有业务逻辑，那怎么办？回答是，将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。
React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。
容器组件
容器组件的特征恰恰相反。
- 负责管理数据和业务逻辑，不负责 UI 的呈现
- 带有内部状态
- 使用 Redux 的 API
总之，只要记住一句话就可以了：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
connect()
React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。如下TodoList组件
上面代码中，TodoList是 UI 组件，VisibleTodoList就是由 React-Redux 通过connect方法自动生成的容器组件。
但是，因为没有定义业务逻辑，上面这个容器组件毫无意义，只是 UI 组件的一个单纯的包装层。为了定义业务逻辑，需要给出下面两方面的信息。
- 输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数
- 输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去。
因此，connect方法的完整 API 如下。
TodoList组件
```javascript
import React,{Component} from 'react'
import {connect} from 'react-redux'
import {CHANGE_INPUT_VALUE,ADD_ITEM_INPUTVALUE,DELETE_ITEM_INPUTVALUE} from './store/ActionType'
class TodoList extends Component{
render () {
return (
<div>
<input value={this.props.inputValue} onChange={this.props.handleInputChange}/>
<button onClick={this.props.handleClick}>提交</button>
<ul>
{
this.props.list.map((item,index) =>{
return <li key={index} onClick={this.props.handleDelete.bind('',index)}>{item}</li>
})
}
</ul>
</div>
)
}
/*handleInputChange (e) {
console.log(e.target.value)
}*/
}
/*const mapStateToProps = (state) =>{
return {
inputValue:state.inputValue
}
}*/
const mapStateToProps = (state,ownProps) =>{
return {
inputValue:state.inputValue,
list:state.list
}
}
// store.dispatch,挂载到props
const mapDispatchToProps = (dispatch) =>{
return {
handleInputChange (e){
const action = {
type:CHANGE_INPUT_VALUE,
value:e.target.value
}
dispatch(action)
},
handleClick (state) {
const action = {
type:ADD_ITEM_INPUTVALUE,
}
dispatch(action)
},
handleDelete (index) {
const action = {
type:DELETE_ITEM_INPUTVALUE,
index
}
console.log(action.index)
dispatch(action)
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList)
下面的TodoList获取store里面的数据就是通过connect获取的这里的意思是让TodoList和store进行连接，Provider中的组件能连接store就是因为connect这个连接
才能正常连接上store
```
````
src/index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'
import {Provider} from 'react-redux';
import store from './store/index'
const App = (
<Provider store = {store}>
<TodoList/>
</Provider>
)
ReactDOM.render(App, document.getElementById('root'));
在这里Provider由react-redux提供，它里面的所有组件都能使用store里面的数据
