mapDispatchToProps如何在react-redux中工作

时间:2017-07-18 14:24:13

标签: reactjs react-redux

我在Redux上观看了egghead.io教程,感觉我对Redux 尝试要做的事情有所了解,但它的实际工作方式对我来说仍然是神秘的。我使用react-redux连接方法实现了Dan的简单计数器应用程序,但我真的不了解我的实现。我尝试了两种可能的方法:

不通过派遣:

const mapDispatchToProps = {
  upIt: () => {
    return ({type:'INCREMENT'}
  )
  },
  downIt: () => {
    return({type:'DECREMENT'})
  }
}

传递调度:

const mapDispatchToProps = dispatch => ({
  upIt: () => {
    dispatch({type:'INCREMENT'}
  )
  },
  downIt: () => {
    dispatch({type:'DECREMENT'})
  }
})

计数器可以使用其中任何一个或两个选项,但我不确定第一个选项(我从不调用' dispatch')是如何设法连接到store.dispatch方法的。有什么理由我更喜欢用另一种方法编写方法吗?

2 个答案:

答案 0 :(得分:5)

mapDispatchToProps视为将相关action creators传递给您的组件的界面(这些动作创建者出现在您的组件中,并作为道具<在您的组件中访问/强>)。

动作创建者 操作相同。

在Redux中,操作只是一个简单的JavaScript对象,如下所示(它可以包含您想要的任何属性,但必须包含type属性):

{ type: 'INCREMENT' }

这些操作将发送到 reducer ,后者根据操作属性处理如何更新状态。

操作创建者函数在调用时将这些操作发送到reducer

因此,在您的示例中,upItdownIt操作创建者,而{type:'INCREMENT'}{type:'DECREMENT'}操作

upIt为例:

upIt: () => {
    return ( {type:'INCREMENT'} )
}

来自connect()的{​​{1}}功能将截取此动作创建器功能返回的操作,并将其发送到redux商店(它然后由 reducer 处理。

react-redux功能实现:

connect

但是,请考虑您可能希望从单个操作创建者 分派多个操作的情况。当一个函数只能connect(mapStateToProps, mapDispatchToProps)(ComponentName) 一次值时,这怎么可能呢?

这是return dispatch参数的来源!它允许您从单个操作创建者发送多个操作

例如,假设您要在UI中创建一个按钮以递增计数器,然后在5秒后再次递减计数器。 mapDispatchToProps中定义的操作创建者可能如下所示:

mapDispatchToProps

请注意我们如何在同一个动作创建者中两次调用const mapDispatchToProps = dispatch => ({ incrementForFiveSeconds: () => { dispatch( {type:'INCREMENT'} ); setTimeout(() => { dispatch( {type:'DECREMENT'} ); }, 5000); }, // other action creators }) 函数!

总结:

  1. 如果您的操作创建者发送 单一操作,那么您可以使用dispatch或{{ 1}} interface。
  2. 如果您的操作创建者可能需要调度 多个操作创建者,那么您需要使用return界面。

答案 1 :(得分:2)

来自Redux文档文档:

  

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps](对象   或功能):

     

如果传递了一个对象,则其中的每个函数都被假定为a   Redux动作创作者。具有相同功能名称但具有的对象   每个动作创建者都被包含在dispatch电话中,所以他们可能会这样做   直接调用,将​​合并到组件的道具中。如果一个   函数被传递,它将被赋予dispatch。如果你不想   订阅商店更新,传递nullundefined代替   mapStateToProps。这取决于你以某种方式返回一个对象   使用dispatch以您自己的方式绑定动作创建者。 (提示:你可以   使用   bindActionCreators()   来自Redux的助手。)如果省略它,则默认实现   将dispatch注入组件的道具中。如果是ownProps   指定为第二个参数,其值将是传递给的道具   您的组件,mapDispatchToProps将在任何时候重新调用   该组件接收新的道具。

在第一种情况下

const mapDispatchToProps = {
  upIt: () => {
    return ({type:'INCREMENT'}
  )
  },
  downIt: () => {
    return({type:'DECREMENT'})
  }
}

mapDispatchToProps是一个对象,因此upItdownIt被假定为动作创建者。

在第二种情况下:

const mapDispatchToProps = dispatch => ({

    upIt: () => {
        dispatch({type:'INCREMENT'}
      )
      },
      downIt: () => {
        dispatch({type:'DECREMENT'})
      }
    })

mapDispatchToProps是一个函数,因此必须将其中的每个函数传递给dispatch