一、UI組件和容器組件

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

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

對(duì)于上面的AppUI就是一UI組件，App就是一個(gè)容器組件。

二、connect

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

1、導(dǎo)入

import { connect } from 'react-redux'

2、使用

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

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

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

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

三、mapStateToProps

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

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

mapStateToProps的第一個(gè)參數(shù)總是state對(duì)象，還可以使用第二個(gè)參數(shù)，代表容器組件的props對(duì)象。使用ownProps作為參數(shù)后，如果容器組件的參數(shù)發(fā)生變化，也會(huì)引發(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、一個(gè)參數(shù)

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

2、兩個(gè)參數(shù)

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

四、mapDispatchToProps

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

1、作為函數(shù)

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

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

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

2、作為對(duì)象

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

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

這兩個(gè)使用的效果一樣。通過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、導(dǎo)入

import {Provider} from "react-redux";

2、使用

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

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

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