connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
參數(shù)1、:mapStateToProps
作用:
1、把store中的某些state或其中的某些屬性注入到當(dāng)前組件中。
2、該參數(shù)是一個(gè)函數(shù),接收Object類型的state,以及Object類型的ownProps。返回一個(gè)Object類型的新state。
3、state示例:{ userInfo , friends }
4、userInfo 和 friends是store中兩個(gè)具體的state,這兩個(gè)state是在各自對(duì)應(yīng)的reducer中定義的。
function mapStateToProps({ loginFormData, intro, router, epassport }) {
return { ...loginFormData,
intro: intro.newUserIntro,
loginType: router.param.loginType,
hasEpassErr: epassport.epassportHeight.hasEpassErr,
hasEpassErrWithCode: epassport.epassportHeight.hasEpassErrWithCode,
};
}
mapStateToProps(state, [ownProps]): 如果定義該參數(shù),組件將會(huì)監(jiān)聽 Redux store 的變化。任何時(shí)候,只要 Redux store 發(fā)生改變,mapStateToProps 函數(shù)就會(huì)被調(diào)用。
該回調(diào)函數(shù)必須返回一個(gè) 純對(duì)象,這個(gè)對(duì)象會(huì)與組件的 props 合并。
如果你省略了這個(gè)參數(shù),你的組件將不會(huì)監(jiān)聽 Redux store。
如果指定了該回調(diào)函數(shù)中的第二個(gè)參數(shù) ownProps,則該參數(shù)的值為傳遞到 該組件 的 props,而且只要組件接收到新的 props,mapStateToProps 也會(huì)被調(diào)用(例如,當(dāng) props 接收到來自父組件一個(gè)小小的改動(dòng),那么你所使用的 ownProps 參數(shù),mapStateToProps 都會(huì)被重新計(jì)算)。
參數(shù)2、:mapDispatchToProps
1、作用:把a(bǔ)ction與dispatch進(jìn)行綁定,然后注入到組件中。
2、該參數(shù)為一個(gè)函數(shù),它接受dispatch作為參數(shù),這個(gè)參數(shù)會(huì)被Redux自動(dòng)傳遞。
3、在該函數(shù)內(nèi)部我們可以 借助Redux的bindActionCreators(actions,dispatch)函數(shù)進(jìn)行action和dispatch的綁定,然后返回它。
function mapDispatchToProps(dispatch) {
return bindActionCreators({
login,
setLoginFormData,
hideLoginError,
jumpTo,
loginFail,
...epassportActions,
}, dispatch);
}
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 如果傳遞的是一個(gè)對(duì)象,那么每個(gè)定義在該對(duì)象的函數(shù)都將被當(dāng)作 Redux action creator,對(duì)象所定義的方法名將作為屬性名;每個(gè)方法將返回一個(gè)新的函數(shù),函數(shù)中dispatch方法會(huì)將action creator的返回值作為參數(shù)執(zhí)行。這些屬性會(huì)被合并到組件的 props 中