一、UI組件和容器組件

React-Redux 將所有組件分成兩大類：UI 組件和容器組件。

• UI 組件：只負責 UI 的呈現(xiàn)，不帶有任何業(yè)務邏輯，沒有狀態(tài)state值的使用，所以的參數(shù)是通過this.props獲取。
• 容器組件：負責管理數(shù)據(jù)和業(yè)務邏輯，不負責 UI 的呈現(xiàn)，有業(yè)務邏輯，并且使用Redux提供的API。

對于上面的AppUI就是一UI組件，App就是一個容器組件。

二、connect

React-Redux提供connect方法，用于從 UI 組件生成容器組件。connect的意思，就是將這兩種組件連起來。

1、導入

import { connect } from 'react-redux'

2、使用

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

connect方法可以省略mapStateToProps參數(shù)，那樣的話，UI 組件就不會訂閱Store，就是說 Store 的更新不會引起 UI 組件的更新。

• mapStateToProps：更新props————>作為輸入源。返回一個對象，key為UI界面對應的名稱，value為state處理的結(jié)果
• mapDispatchToProps：更新action————>作為輸出源。觸發(fā)action更新reducer，進而更新state，從而驅(qū)動參數(shù)1變化，引起UI數(shù)據(jù)的變化

通過這個兩參數(shù)的自動調(diào)用方式，將UI和業(yè)務邏輯分開，UI組件通過props顯示，沒有任何業(yè)務邏輯，容器組件負責邏輯業(yè)務。下面詳解這兩個參數(shù)

三、mapStateToProps

建立一個從（外部的）state對象到（UI 組件的）props對象的映射關(guān)系。作為函數(shù)，mapStateToProps執(zhí)行后應該返回一個對象，里面的每一個鍵值對就是一個映射。

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

mapStateToProps的第一個參數(shù)總是state對象，還可以使用第二個參數(shù)，代表容器組件的props對象。使用ownProps作為參數(shù)后，如果容器組件的參數(shù)發(fā)生變化，也會引發(fā) UI 組件重新渲染。

下面以加減數(shù)字為例說明：

<div>
    <button style={{width: 40, height: 40}} onClick={onIncreaseClick}>+</button>
    <text style={{padding: 40}}>{value}</text>
    <button style={{width: 40, height: 40}} onClick={onReduceClick}>-</button>
</div>

1、一個參數(shù)

const mapStateToProps = (state) => {
    return {
         value: state.count //UI組件中需要什么參數(shù)，對象中就寫哪些參數(shù)
     }
}

2、兩個參數(shù)

const mapStateToProps = (state, ownProps) => {
    return {
        value: state.count //UI組件中需要什么參數(shù)，對象中就寫哪些參數(shù)
    }
}

四、mapDispatchToProps

mapDispatchToProps是connect函數(shù)的第二個參數(shù)，用來建立 UI 組件的參數(shù)到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操作應該當作 Action，傳給 Store。它可以是一個函數(shù)，也可以是一個對象。

1、作為函數(shù)

如果mapDispatchToProps是一個函數(shù)，會得到dispatch和ownProps（容器組件的props對象）兩個參數(shù)。作為函數(shù)，應該返回一個對象，該對象的每個鍵值對都是一個映射，定義了 UI 組件的參數(shù)怎樣發(fā)出 Action。

dispach(action)發(fā)出消息。

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onIncreaseClick: () => dispatch({type: 'increase'}),
        onReduceClick: () => dispatch({type: 'reduce'})
    }
}

2、作為對象

const mapDispatchToProps = {
    onIncreaseClick: () => ({type: 'increase'}),
    onReduceClick: () => ({type: 'reduce'})
};

const mapDispatchToProps = (dispatch) => ({
    onIncreaseClick() {
       dispatch({type: 'increase'})
    },
    onReduceClick() {
        dispatch({type: 'reduce'})
    }
})

這兩個使用的效果一樣。通過connect，store.subscribe也不需要了。通過connnect方法，最終的代碼：

import React, {Component} from 'react'
import {connect} from "react-redux";
 
class App extends Component {
 
    render() {
        const {value, onIncreaseClick, onReduceClick} = this.props
        return (
            <div>
                <button style={{width: 40, height: 40}} onClick={onIncreaseClick}>+</button>
                <text style={{padding: 40}}>{value}</text>
                <button style={{width: 40, height: 40}} onClick={onReduceClick}>-</button>
            </div>
        );
 
    }
}
 
const mapStateToProps = (state) => {
        return {
            value: state.count
        }
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onIncreaseClick: () => dispatch({type: 'increase'}),
        onReduceClick: () => dispatch({type: 'reduce'})
    }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(App);

五、Provider

1、導入

import {Provider} from "react-redux";

2、使用

Provider在根組件外面包了一層，這樣一來，App的所有子組件就默認都可以拿到state了

 <Provider store={store}>
            <App/>
 </Provider>

效果如下：http://localhost:3000/

到此這篇關(guān)于react-redux的connect用法詳解的文章就介紹到這了,更多相關(guān)react-redux的connect用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論