bindActionCreators作用

个人总结:

讲一下bindActionCreators这个API,

bindActionCreators是要结合mapDispatchToProps来使用的。

mapDispatchToProps函数接收一个函数，这个函数返回一个对象，对象中键是action的名字，值是进行dispatch处理的函数

例:

mapDispatchToProps((dispatch)=>{

　　return {

　　　　action:(data) => dispatch( { type:'add',payload:data } )

通常情况下都用actioncreator来生成action，所以通常是下面的写法:

action:(data) => dispatch( actioncreator(data) )

}

})

由于通常的写法下action都是由actioncreator来生成的，既然所有的都有这样的操作，不如弄个函数来封装一下

于是就有了bindActionCreators，写法变成了这样:

mapDispatchToProps =((dispatch)=>{

return {

　　 action:bindActionCreators({

action1:actionCreator1,

　　　　　　 action2:actionCreator2 //这样写的花就不涉及dispatch等操作的明文编写了

})

}

进行了mapDispatchToProps操作之后，就可以在props中调用方法了

this.props.action1()

this.props.action2()

就可以直接使用这些方法了。

==========================================================================================================================

原文转载自网络:

问题描述

使用react-redux时使用connect方法将store和组件关联在一起，那么connect的第二个参数是mapDispatchToProps
在mapDispatchToProps中，第一个参数是dispatch，函数的返回值是一个对象，并且对象中的每一个值都是一个函数，函数都可以通过this.props.key调用。

为什么redux官网上推荐了bindActionCreators，这个有什么作用呢？
使用不同的方式写mapDispatchToProps对action工厂函数的要求有什么不同吗
如果是异步action该如何使用bindActionCreators呢

问题解决

A1:和以前的写法对比：

对于dispatch一个同步action，mapDispatchToProps以前写法

connect((state)=> ({order: state.order})),
(dispatch) => ({
    getOrder: (data) => dispatch(actionCreator(data))
}))

mapDispatchToProps函数被调用的时候会传入dispatch这个参数，返回的对象中每个函数中都可以使用这个dispatch去发送一个action对象（注意我们通常使用action的工厂函数action creator构造action对象）因此返回的每一个函数中都会有这样类似操作。那么就可以写一个bindActionCreators将dispacth函数和action构造函数直接结合在一起就可以了。因此可以换一种写法

connect((state)=> ({order: state.order})),
(dispatch) => ({
    actions: bindActionCreators({
        action1: actionCreator1,
        action2: actionCreator2
}),dispatch)
//等价于
connect((state)=> ({order: state.order})),
(dispatch) => ({
actions: {
    action1: () => dispacth(actionCreator1()),
    action2: () => dispacth(actionCreator2())
}}))

对于异步action
- 同样可以使用bindActionCreators
- 只要你的action构造函数返回值是一个函数
- 这时候bindActionCreators 会使用dispatch将这个函数发送出去
- 当然reducer不能接受
- 就会被交给中间件redux-thunk处理，这时候返回的函数会在异步操作结束之后被调用并传入dispatch作为参数
因此bindActionCreators可以直接dispacth第一个参数（对象）的返回值

Q2:使用bindActionCreators好处是什么呢？
A2:实际上就是将dispatch直接和action creator结合好然后发出去的这一部分操作给封装成一个函数
Q3:那么使用bindActionCreators如何调用不同的dispacth方法呢？
A3: 如下代码使用this.props.actions是一个对象，其中的每一个item的key就是action creator的function的名字，value就是加了dispatch这个action的function

    connect((state)=> ({order: state.order})),
    (dispatch) => ({
        actions: bindActionCreators({
            action1: actionCreator1,
            action2: actionCreator2
    }),dispatch)
    //this.props.actions.action1()