問(wèn)題描述
- 使用redux的時(shí)候要使用connect方法將store和組件關(guān)聯(lián)在一起傅是，那么connect就有兩個(gè)參數(shù)其中一個(gè)就是mapDispatchToProps
- 在mapDispatchToProps這個(gè)函數(shù)中，第一個(gè)參數(shù)是dispatch贤笆，函數(shù)的返回值是一個(gè)對(duì)象杜跷，并且對(duì)象中的每一個(gè)值都是一個(gè)函數(shù)拦焚，這些函數(shù)都可以通過(guò)
this.props.key調(diào)用亿昏。 - 但是問(wèn)題來(lái)了
- 為什么redux官網(wǎng)上推薦了bindActionCreators這個(gè)有什么作用呢？
- 使用不同的方式寫(xiě)mapDispatchToProps對(duì)action工廠函數(shù)的要求有什么不同嗎
- 如果是異步action該如何使用bindActionCreators呢芥颈？
問(wèn)題解決
A1:和以前的寫(xiě)法對(duì)比：
-
對(duì)于dispatch一個(gè)同步action惠勒，mapDispatchToProps以前寫(xiě)法
connect((state)=> ({order: state.order})), (dispatch) => ({ getOrder: (data) => dispatch(actionCreator(data)) }))- connect的前兩個(gè)參數(shù)都是函數(shù)，并且每個(gè)函數(shù)的返回值必須是一個(gè)對(duì)象
- mapDispatchToProps函數(shù)被調(diào)用的時(shí)候會(huì)傳入dispatch這個(gè)參數(shù)爬坑，返回的對(duì)象中每個(gè)函數(shù)中都可以使用這個(gè)dispatch去發(fā)送一個(gè)action對(duì)象（注意我們通常使用action的工廠函數(shù)構(gòu)造action對(duì)象）因此返回的每一個(gè)對(duì)象函數(shù)中都會(huì)有dispacth一個(gè)action構(gòu)造函數(shù)的操作纠屋，那么就可以寫(xiě)一個(gè)bindActionCreators將dispacth函數(shù)和action構(gòu)造函數(shù)直接結(jié)合在一起就可以了。
因此可以換一種寫(xiě)法
connect((state)=> ({order: state.order})), (dispatch) => ({ actions: bindActionCreators({ actionCreator1: actionCreator1, actionCreator2: actionCreator2 }),dispatch) //等價(jià)于 connect((state)=> ({order: state.order})), (dispatch) => ({ actions: { actionCreator1: () => dispacth(actionCreator1()), actionCreator2: () => dispacth(actionCreator2()) }})) -
對(duì)于異步action
- 同樣可以使用bindActionCreators
- 只要你的action構(gòu)造函數(shù)返回值是一個(gè)函數(shù)
- 這時(shí)候bindActionCreators 會(huì)使用dispatch將這個(gè)函數(shù)發(fā)送出去
- 當(dāng)然reducer不能接受
- 就會(huì)被交給中間件redux-thunk處理盾计，這時(shí)候返回的函數(shù)會(huì)在異步操作結(jié)束之后被調(diào)用并傳入dispatch作為參數(shù)
因此bindActionCreators可以直接dispacth第一個(gè)參數(shù)（對(duì)象）的返回值
Q2:使用bindActionCreators好處是什么呢售担？
A2:實(shí)際上就是將dispatch直接和action creator結(jié)合好然后發(fā)出去的這一部分操作給封裝成一個(gè)函數(shù)
Q3:那么使用bindActionCreators如何調(diào)用不同的dispacth方法呢？
A3: 如下代碼使用this.props.actions是一個(gè)對(duì)象署辉，其中的每一個(gè)item的key就是action creator的function的名字族铆，value就是加了dispatch這個(gè)action的function
connect((state)=> ({order: state.order})),
(dispatch) => ({
actions: bindActionCreators({
actionCreator1: actionCreator1,
actionCreator2: actionCreator2
}),dispatch)
//this.props.actions.actionCreator1()
