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()