在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,挂载到propsconst 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里面的数据
来源：https://www.cnblogs.com/zhx119/p/10792228.html