bindActionCreators作用

问题描述

• 使用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))
  }))
  

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

  connect((state)=> ({order: state.order})),
  (dispatch) => ({
      actions: bindActionCreators({
          actionCreator1: actionCreator1,
          actionCreator2: actionCreator2
  }),dispatch)
  //等价于
  connect((state)=> ({order: state.order})),
  (dispatch) => ({
  actions: {
      actionCreator1: () => dispacth(actionCreator1()),
      actionCreator2: () => 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({
            actionCreator1: actionCreator1,
            actionCreator2: actionCreator2
    }),dispatch)
    //this.props.actions.actionCreator1()