How does mapDispatchToProps work in react-redux

Viewed 5313

I watched the egghead.io tutorial on Redux and feel like I have some sense of what Redux is trying to do, but the way it actually works is still mysterious to me. I implemented Dan's simple counter app using the react-redux connect method, but I don't really understand my implementation. There are two possible ways I tried:

Without passing dispatch:

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

Passing dispatch:

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

The counter works using either or those two options, but I am not sure how the first option (where I never call 'dispatch') manages to hook up to the store.dispatch method. Is there any reason I should prefer one way of writing the method over the other?

2 Answers
Related