connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
連接 React 組件與 Redux store。
連接操作不會改變原來的組件類,反而返回一個新的已與 Redux store 連接的組件類。
參數
[mapStateToProps(state, [ownProps]): stateProps] (Function): 如果定義該參數,組件將會監聽 Redux store 的變化。任何時候,只要 Redux store 發生改變,mapStateToProps 函數就會被調用。該回調函數必須返回一個純對象,這個對象會與組件的 props 合併。如果你省略了這個參數,你的組件將不會監聽 Redux store。如果指定了該回調函數中的第二個參數 ownProps,則該參數的值爲傳遞到組件的 props,而且只要組件接收到新的 props,mapStateToProps 也會被調用。
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 如果傳遞的是一個對象,那麼每個定義在該對象的函數都將被當作 Redux action creator,而且這個對象會與 Redux store 綁定在一起,其中所定義的方法名將作爲屬性名,合併到組件的 props 中。如果傳遞的是一個函數,該函數將接收一個 dispatch 函數,然後由你來決定如何返回一個對象,這個對象通過 dispatch 函數與 action creator 以某種方式綁定在一起(提示:你也許會用到 Redux 的輔助函數 bindActionCreators())。如果你省略這個 mapDispatchToProps 參數,默認情況下,dispatch 會注入到你的組件 props 中。如果指定了該回調函數中第二個參數 ownProps,該參數的值爲傳遞到組件的 props,而且只要組件接收到新 props,mapDispatchToProps 也會被調用。
[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): 如果指定了這個參數,mapStateToProps() 與 mapDispatchToProps() 的執行結果和組件自身的 props 將傳入到這個回調函數中。該回調函數返回的對象將作爲 props 傳遞到被包裝的組件中。你也許可以用這個回調函數,根據組件的 props 來篩選部分的 state 數據,或者把 props 中的某個特定變量與 action creator 綁定在一起。如果你省略這個參數,默認情況下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的結果。
[options] (Object) 如果指定這個參數,可以定製 connector 的行爲。
[pure = true] (Boolean): 如果爲 true,connector 將執行 shouldComponentUpdate 並且淺對比 mergeProps 的結果,避免不必要的更新,前提是當前組件是一個“純”組件,它不依賴於任何的輸入或 state 而只依賴於 props 和 Redux store 的 state。默認值爲 true。
[withRef = false] (Boolean): 如果爲 true,connector 會保存一個對被包裝組件實例的引用,該引用通過 getWrappedInstance() 方法獲得。默認值爲 false
返回值
根據配置信息,返回一個注入了 state 和 action creator 的 React 組件。
容器組件使用 connect() 方法連接 Redux
我們用 react-redux 提供的 connect() 方法將“笨拙”的 Counter 轉化成容器組件。connect() 允許你從 Redux store 中指定準確的 state 到你想要獲取的組件中。這讓你能獲取到任何級別顆粒度的數據。
讓我們看下,我們擁有一個 的展示組件,它有一個通過 props 傳過來的值,和一個函數 onIncrement,當你點擊 “Increment” 按鈕時就會調用這個函數:
import { Component } from 'react';
export default class Counter extends Component {
render() {
return (
<button onClick={this.props.onIncrement}>
{this.props.value}
</button>
);
}
}
containers/CounterContainer.js
import { Component } from 'react';
import { connect } from 'react-redux';
import Counter from '../components/Counter';
import { increment } from '../actionsCreators';
// 哪些 Redux 全局的 state 是我們組件想要通過 props 獲取的?
function mapStateToProps(state) {
return {
value: state.counter
};
}
// 哪些 action 創建函數是我們想要通過 props 獲取的?
function mapDispatchToProps(dispatch) {
return {
onIncrement: () => dispatch(increment())
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Counter);
總結一下,connect後面第二個括號是要添加prop的react組件,第一個括號中的參數是用來改變該組件prop的方法,第一個括號有兩個參數,第一個參數是一個函數,返回一個對象,對象的鍵是該組件的prop屬性,值是該prop的值;第二個參數也是一個函數,返回一個對象,對象的鍵同樣是prop的屬性名,值是一個redux的dispatch,當這個prop屬性被用於觸發時,dispatch會改變redux中state的值。