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

二、由於不含有狀態，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裏面的數據