1.組件

react-redux把組件分為兩類：UI組件和容器組件。

UI組件的特征：

• 只負(fù)責(zé) UI 的呈現(xiàn)，不帶有任何業(yè)務(wù)邏輯
• 沒有狀態(tài)（即不使用this.state這個變量）
• 所有數(shù)據(jù)都由參數(shù)（this.props）提供
• 不使用任何 Redux 的 API

下面展示一個UI組件：

import React,{Component} from 'react';

class Nav extends Component{
   
    render(){
        return <div>
            <div>
                <ul>
                    <li>首頁</li>
                    <li>發(fā)布信息</li>
                    <li>個人中心</li>
                </ul>
            </div>
        </div>
    }
}

容器組件的特征：

• 負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé) UI 的呈現(xiàn)
• 帶有內(nèi)部狀態(tài)
• 使用 Redux 的 API

因此，UI 組件負(fù)責(zé) UI 的呈現(xiàn)，容器組件負(fù)責(zé)管理數(shù)據(jù)和邏輯。

2.connect方法

react-redux提供connect()方法，從于從UI組件生成容器組件。

我使用畫圖軟件CampTools畫了connect()方法的概念圖。

redux-connect connect()概念圖

connect()有四個參數(shù)：mapStateToProps、mapDispatchToProps、mergeProps和options，我們一般常用的是mapStateToProps、mapDispatchToProps這兩個參數(shù)。

connect方法在項(xiàng)目中的用法：

import {connect} from "react-redux";
import Login from "../components/login";

export default connect(mapStateToProps,mapDispatchToProps)(Login);

上面的代碼中，我引入了react-redux中的connect方法，Login是我引入的項(xiàng)目中的UI組件。connect方法接受兩個參數(shù)：mapStateToProps和mapDispatchToProps。它們定義了 UI 組件的業(yè)務(wù)邏輯。前者負(fù)責(zé)輸入邏輯，即將state映射到 UI 組件的參數(shù)（props），后者負(fù)責(zé)輸出邏輯，即將用戶對 UI 組件的操作映射成 Action。這樣就創(chuàng)建了一個容器組件。

3.mapStateToProps()

這個函數(shù)允許我們將store中的數(shù)據(jù)作為props綁定到組件上。

const mapStateToProps = (state)=> {
    console.log('state',state);
     return {
         isRight:state.login.judge,
     }
};

上面代碼中，mapStateToProps是一個函數(shù)，它接state作為參數(shù)，返回一個對象。這個對象有一個isRight屬性，代表UI組件的同名參數(shù)。

mapStateToProps會監(jiān)聽 Store，每當(dāng)state更新的時(shí)候，就會自動執(zhí)行，重新計(jì)算 UI 組件的參數(shù)，從而觸發(fā) UI 組件的重新渲染。

mapStateToProps的第一個參數(shù)總是state對象，還可以使用第二個參數(shù)，代表容器組件的props對象。

使用ownProps作為參數(shù)后，如果容器組件的參數(shù)發(fā)生變化，也會引發(fā) UI 組件重新渲染。
connect方法可以省略mapStateToProps參數(shù)，那樣的話，UI 組件就不會監(jiān)聽Store，就是說 Store 的更新不會引起 UI 組件的更新。

4.mapDispatchToProps()

connect 的第二個參數(shù)是 mapDispatchToProps，它的功能是，用來建立 UI 組件的參數(shù)到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操作應(yīng)該當(dāng)作 Action，傳給 Store。

如果mapDispatchToProps是一個對象，它的每個鍵名也是對應(yīng) UI 組件的同名參數(shù)，鍵值應(yīng)該是一個函數(shù)，會被當(dāng)作 Action creator ，返回的 Action 會由 Redux發(fā)出。

const mapDispatchToProps = (dispatch) => {
   return {
       onJudge:(data)=>{
           dispatch({type:"LOGIN",data});
       }
   }
};

上面的代碼中，mapDispatchToProps返回一個對象，該對象的每個鍵值對都是一個映射，定義了 UI 組件的同名參數(shù)怎樣發(fā)出 Action。

如果mapDispatchToProps是一個函數(shù)，會得到dispatch和ownProps（容器組件的props對象）兩個參數(shù)。上面的代碼寫成函數(shù)就是如下示例：

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onJudge: () => {
      dispatch({
        type: 'LOGIN',
        data
      });
    }
  };
}

想要更詳細(xì)的了解，可看項(xiàng)目完整代碼：https://github.com/second-Sale/second-sale