對React-redux中connect方法的理解

Bryan 發(fā)布于2019-08-20 18:25 / 2372人閱讀

摘要：應(yīng)用中唯一的狀態(tài)應(yīng)用的子組件例子方法來看下函數(shù)到底是如何將和組件聯(lián)系在一起的，注意到文檔中有這樣的一句話并不會改變它連接的組件，而是提供一個經(jīng)過包裹的組件。

關(guān)于React-redux

Redux是React全家桶的重要一員，之前在知乎上也看到類似的提問：該如何通俗易懂的理解Redux?
Redux是JavaScript的狀態(tài)容器，Redux的概念簡單明了：

1. 應(yīng)用中所有的狀態(tài)都是以一個對象樹的形式存儲在一個單一的store中；
2. 當(dāng)你想要改變應(yīng)用的中的狀態(tài)時，你就要dispatch一個action,這也是唯一的改變state的方法；
3. 通過編寫reducer來維護(hù)狀態(tài)，返回新的state,不直接修改原來數(shù)據(jù)；

為什么會有Redux

在React中，數(shù)據(jù)的傳遞主要采用state和props，props得由父級分發(fā)下來，而state是組件中可自行管理的狀態(tài)，這意味著React并沒有讓數(shù)據(jù)回溯的能力，數(shù)據(jù)只能單向向下分發(fā)，或者自行內(nèi)部處理，舉一個簡單的例子，父組件可以使用props向子組件傳遞數(shù)據(jù)，子組件可以通過觸發(fā)回調(diào)函數(shù)來改變父組件的狀態(tài)，如果是那種沒有嵌套關(guān)系的組件，該如何來實現(xiàn)通信呢？為了解決這個問題,Redux的方法就是將store放在根目錄頂層組件中，一層層往下分發(fā)給各子組件,在子組件中進(jìn)行調(diào)用，Redux的作用是讓狀態(tài)變得更加可預(yù)測、并且更容易管理。

Redux由Flux框架演變而來，但在Flux的基礎(chǔ)上Redux改變了整個框架中某些角色的作用，例如在Flux中你可以擁有多個store，每個store存儲自己對應(yīng)的那部分狀態(tài),在Redux中，你只能維護(hù)一個store,存儲了整個應(yīng)用的所有狀態(tài)，Redux更傾向于把store分發(fā)下去，dispatch action的時候，reducer根據(jù)狀態(tài)對象的key值再將store進(jìn)行拆分，reducer能拿到store中對應(yīng)的那一部分進(jìn)行處理，Redux提供createStore、combineReducers、applyMiddleware等一系列方法來配合React-redux使用幫我們更好的對這個store進(jìn)行管理，這里要詳講的是React-redux中的connect方法。

Store與視圖層的綁定 Provider組件

想要把store綁定在視圖層上，得用到React-redux中的兩個主角:Provider和Connect，在api文檔第一段話,作者說通常情況下你無法使用connect()去connect一個沒有繼承Provider的組件，也就是說如果你想在某個子組件中使用Redux維護(hù)的store數(shù)據(jù)，它必須是包裹在Provider中并且被connect過的組件，Provider的作用類似于提供一個大容器，將組件和Redux進(jìn)行關(guān)聯(lián)，在這個基礎(chǔ)上，connect再進(jìn)行store的傳遞。

Provider組件源碼：

export function createProvider(storeKey = "store", subKey) {
......
class Provider extends Component {
    getChildContext() {
        return { [storeKey]: this[storeKey], [subscriptionKey]: null }
    }
    constructor(props, context) {
        super(props, context)
        this[storeKey] = props.store;
    }

    render() {
        return Children.only(this.props.children)
    }
}
}

從源碼中可以看到，作者用了React的Context,Context解決了一個React中很常見的問題：當(dāng)你的組件嵌套越來越深的時候，context能讓你父組件和其它里層組件之間的通信變的更方便，createProvider方法將返回一個Provider組件，該組件接受store和子組件，在Provider中定義了getChildContext方法來傳遞store，那么在子組件中利用contextTypes，你就能利用context訪問到父級組件傳遞的store數(shù)據(jù)了。

Props

store:應(yīng)用中唯一的狀態(tài)store

children: 應(yīng)用的子組件

例子：

connect方法

來看下connect函數(shù)到底是如何將store和組件聯(lián)系在一起的，注意到api文檔中有這樣的一句話:

It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.

connenct并不會改變它“連接”的組件，而是提供一個經(jīng)過包裹的connect組件。 conenct接受4個參數(shù)，分別是mapStateToProps，mapDispatchToProps，mergeProps，options(使用時注意參數(shù)位置順序)。

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps(state, ownProps) 方法允許我們將store中的數(shù)據(jù)作為props綁定到組件中，只要store更新了就會調(diào)用mapStateToProps方法，mapStateToProps返回的結(jié)果必須是object對象，該對象中的值將會更新到組件中，例子：

const mapStateToProps = (state) => {
    return ({
        count: state.counter.count
    })
}

mapDispatchToProps(dispatch, [ownProps]) 第二個參數(shù)允許我們將action作為props綁定到組件中，mapDispatchToProps希望你返回包含對應(yīng)action的object對象，例如：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(yourComponent)

當(dāng)你想對組件的render更新進(jìn)行更好的控制的時候，它也支持返回function方法，具體可以點擊#279查看，例子：

const mapDispatchToProps = {
    // increment: () => increment(1),
    increase, // import increase function from action
    decrease 
}

mergeProps(stateProps, dispatchProps, ownProps) 該參數(shù)非必須，redux默認(rèn)會幫你把更新維護(hù)一個新的props對象，類似調(diào)用Object.assign({}, ownProps, stateProps, dispatchProps)。

而options是為了更好的定制化設(shè)置的一個參數(shù)，允許返回5個boolean、function的值，我平時基本上沒有接觸到，想了解的可以參考api文檔。

附參考文檔：

Redux中文文檔

Redux api介紹

(自己平時寫的一些總結(jié)，有誤的地方歡迎交流指正)