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.函數名()