React系列： redux - bindActionCreators的使用方法

react-redux的connect方法

接受4個參數：

1. mapStateToProps(state, [ownProps]) 接受完整的redux狀態樹作爲參數，返回對象的所有key都會成爲組件的props
2. mapDispatchToProps(dispatch, [ownProps]) 接受redux的dispatch方法作爲參數，返回當前組件相關部分的action creator並可以在這裏將action creator與props綁定，減少冗餘
3. mergeProps(stateProps, dispatchProps, ownProps) 如果指定這個函數，你將分別獲得 mapStateToProps、 mapDispatchToProps 返回值以及當前組件的props 作爲參數，最終返回你期望的、完整的 props
4. [options] : pure:true, 將爲組件添加shouldComponentUpdate()聲明週期函數；
   withRef：false， 若爲true，爲組件加一個ref值，後續可以使用 getWrappedInstance() 方法來獲取該 ref

mapDispatchToProps可以是函數或者對象

可以把actioncreator綁定到props上，直接使用。綁定方法如下：

1.使用bindActionCreators

主要用於當想要把某些方法傳遞給子組件，並且不想傳遞dispatch等的時候用。

//./../../../redux/actions/customer.js
export const updateCustomerInfo = (payload = {}) => {
		return {
			type: 'ADD_CUSTOMER_INFO'
		}
}

export const toggleCustomerDrawer = (flag)=> {
	return {
		type: 'TOGGLE_CUSTOMER_DRAWER',
		payload: flag
	}
}
//
import {bindActionCreators} from 'redux';
import * as Actions from './../../../redux/actions/customer';

@connect(state => ({
	drawerInfo: state.customerDrawerInfo,
	curCustomer: state.cusomerInfo
}), dispatch=> ({
	...bindActionCreators(Actions, dispatch)
}))

通過以上方法綁定後，就可以直接調用this.props.updateCustomerInfo()來分發action

2.不用bindActionCreators，使用dispatch，兩者效果一樣

@connect(state => ({
	drawerInfo: state.customerDrawerInfo,
	curCustomer: state.cusomerInfo
}), dispatch=> ({
	updateCustomerInfo: (record) => {dispatch(Actions.updateCustomerInfo(record))}
}))

---

---

也可以上面兩個都不用，用dispatch來分發action。

react-redux裏的connect方法，可以把dispatch方法綁定到組件的props上， this.props(Actions.updateCustomerInfo(record))