react-redux的使用

在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 如下。

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

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里面的数据