對於react-redux的理解

1、redux與組件
React-Redux提供connect方法,用於從UI組件生成容器組件
2、react-redux的基本使用
1.引入
import {Provider} from "react-redux"
在根組件外層嵌套一個Provider。Provider的做用就是將store傳遞給每個子組件,每個子組件就均可以使用store了,不須要重複地在組件中引入store
2.connect進行鏈接
(1)在子組件中引入connect
import {connect} from "react-redux"2)進行鏈接
export default connect(mapStateToProps,mapDispatchToProps)(組件名稱)
(3)connect()()
第一個括號內有三個參數:
    第一個參數:mapStateToProps:把store裏的state映射到當前組件的props中
    第二個參數:mapDispatchToProps:
    1)該方法用來修改數據,其中有一個參數爲dispatch
    2)該方法提供了一些方法來進行數據的修改(需手動書寫方法,依舊要把action返回給Store),該方法被映射到了this.props中。dispatch是用來發送action的。
第二個括號:綁定的組件名稱
3、mapStateToProps
1.做用:創建一個從外部state對象到UI組件的props對象的映射關係。
2.mapStateToProps會訂閱Store,每當state更新時,就會自動執行,從新計算UI組件的參數,從而觸發UI組件的從新渲染。調用時經過this.props.[key值]來使用。
4、mapDispatchToProps
1.做用:用來創建UI組件的參數到store.dispatch方法的映射。即它定義了哪些用戶的操做應該當作Action傳給Store。它能夠是一個函數,也能夠是一個對象。
2.用法:
const mapDispatchProps = (dispatch)=>({
    函數名稱:function(){
        dispatch(action)
    }
})
mapDispatchProps函數須要返回出去一個函數,這個函數中用dispatch傳遞一個action
最終子組件變成了UI組件,connect返回最終的容器組件,react-redux建議咱們把全部的數據都放在store中
3.調用:this.props.函數名()
相關文章
相關標籤/搜索