react-redux connect方法

1.組件

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

UI組件的特征:
  • 只負責 UI 的呈現,不帶有任何業務邏輯
  • 沒有狀態(即不使用this.state這個變量)
  • 所有數據都由參數(this.props)提供
  • 不使用任何 Redux 的 API

下面展示一個UI組件:

import React,{Component} from 'react';

class Nav extends Component{
   
    render(){
        return <div>
            <div>
                <ul>
                    <li>首頁</li>
                    <li>發布信息</li>
                    <li>個人中心</li>
                </ul>
            </div>
        </div>
    }
}
容器組件的特征:
  • 負責管理數據和業務邏輯,不負責 UI 的呈現
  • 帶有內部狀態
  • 使用 Redux 的 API

因此,UI 組件負責 UI 的呈現,容器組件負責管理數據和邏輯。

2.connect方法

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

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

redux-connect connect()概念圖

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

connect方法在項目中的用法:

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

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

上面的代碼中,我引入了react-redux中的connect方法,Login是我引入的項目中的UI組件。connect方法接受兩個參數:mapStateToPropsmapDispatchToProps。它們定義了 UI 組件的業務邏輯。前者負責輸入邏輯,即將state映射到 UI 組件的參數(props),后者負責輸出邏輯,即將用戶對 UI 組件的操作映射成 Action。這樣就創建了一個容器組件。

3.mapStateToProps()

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

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

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

mapStateToProps會監聽 Store,每當state更新的時候,就會自動執行,重新計算 UI 組件的參數,從而觸發 UI 組件的重新渲染。

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

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

4.mapDispatchToProps()

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

如果mapDispatchToProps是一個對象,它的每個鍵名也是對應 UI 組件的同名參數,鍵值應該是一個函數,會被當作 Action creator ,返回的 Action 會由 Redux發出。

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

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

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

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

想要更詳細的了解,可看項目完整代碼:https://github.com/second-Sale/second-sale

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容