對React-redux中connect方法的理解

Bryan 發布于2019-08-20 18:25 / 2374人閱讀

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

關于React-redux

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

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

為什么會有Redux

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

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

Store與視圖層的綁定 Provider組件

想要把store綁定在視圖層上，得用到React-redux中的兩個主角:Provider和Connect，在api文檔第一段話,作者說通常情況下你無法使用connect()去connect一個沒有繼承Provider的組件，也就是說如果你想在某個子組件中使用Redux維護的store數據，它必須是包裹在Provider中并且被connect過的組件，Provider的作用類似于提供一個大容器，將組件和Redux進行關聯，在這個基礎上，connect再進行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中很常見的問題：當你的組件嵌套越來越深的時候，context能讓你父組件和其它里層組件之間的通信變的更方便，createProvider方法將返回一個Provider組件，該組件接受store和子組件，在Provider中定義了getChildContext方法來傳遞store，那么在子組件中利用contextTypes，你就能利用context訪問到父級組件傳遞的store數據了。

Props

store:應用中唯一的狀態store

children: 應用的子組件

例子：

connect方法

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

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

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

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

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

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

mapDispatchToProps(dispatch, [ownProps]) 第二個參數允許我們將action作為props綁定到組件中，mapDispatchToProps希望你返回包含對應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)

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

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

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

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

附參考文檔：

Redux中文文檔

Redux api介紹

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

GPU云服務器云服務器對python的理解談談對php的理解對人工智能的理解對云服務器的理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84473.html

快速理解react-redux

摘要：和的結合簡述相信很多前端開發者都聽說或使用過，我曾寫過一篇關于快速理解的文章，雖說是快速理解，但實際上更應該叫做復習吧。它通過高階函數，純函數使我們在編寫組件時完全不用接觸相關內容，只通過將組件和數據連接起來即可。 react-redux react和redux的結合簡述相信很多前端開發者都聽說或使用過react-redux，我曾寫過一篇關于快速理解redux的文章，雖說是快...

MoAir 2019-08-23 14:11 評論0 收藏0
帶著問題看 react-redux 源碼實現

摘要：更新類型及具體內容負責更新數據的具體邏輯。即根據當前及攜帶的信息合成新的數據。下面帶著這些問題深入了解本質上也是高階組件的一種實現。核心實現聲明以被子組件獲取。通過的實現，我們可以得到的重要性淺比較的實現由此可以看到的重要性。前言 Redux作為通用的狀態管理器，可以搭配任意界面框架。所以并搭配react使用的話就要借助redux官方提供的React綁定庫react-redux，以高效靈活的...

JellyBool 2019-05-22 18:00 評論0 收藏0
對redux和react-redux的理解和總結（一）

摘要：使得在變化和異步中可預測。它是數據的唯一來源。指定了應用狀態的變化如何響應并發送到的，只是描述了有事情發生了這一事實，并沒有描述應用如何更新。更新的函數稱為，它是一個純函數，接受舊的和，返回新的。是和之間的橋梁，是把它們聯系到一起的對象。為什么使用redux 隨著前端單頁面開發越來越復雜，javascript需要管理越來越多的狀態state。如果一個model的變化引起另一個mode...

skinner 2019-08-22 18:19 評論0 收藏0
手挽手帶你學React：四檔（下篇）一步一步學會react-redux

摘要：手挽手帶你學入門四檔用人話教你，理解架構，以及運用在中。學完這一章，你就可以開始自己的項目了。結合搭建基礎環境我們上一章講過了的原理，內部是有一個的，只有才可以控制它變化。手挽手帶你學React入門四檔,用人話教你react-redux，理解redux架構，以及運用在react中。學完這一章，你就可以開始自己的react項目了。視頻教程上一篇我們自己實現了Redux，這一篇我們來...

FullStackDeveloper 2019-08-23 15:11 評論0 收藏0
【React進階系列】手寫實現react-redux api

簡介：簡單實現react-redux基礎api react-redux api回顧把store放在context里，所有子組件可以直接拿到store數據使組件層級中的 connect() 方法都能夠獲得 Redux store 根組件應該嵌套在中 ReactDOM.render( , rootEl ) ReactDOM.render( ...

劉玉平 2019-08-23 12:28 評論0 收藏0