Why do we need mapDispatchToProps if we already have dispatch as a prop?

Question

I don't really get why it's different. Let me show an example what i mean:

//actions.js
export const doSthOnClick = () => {
  return {
    type: 'ACTION'
  }
}

//example.js
import {doSthOnClick} from './actions';

//...

//handle click first option
handleClick = () => {
  this.props.doSthOnClick() //from mapDispatchToProps
}

//handle click second option
handleClick = () => {
  this.props.dispatch(doSthOnClick()) //the imported
}

//...

<div onClick={handleClick}></div>

//...

const mapDispatchToProps = (dispatch) => {
  doSthOnClick: () => dispatch(doSthOnClick)
}

//connect

I know that if we use mapDispatchToProps, the component will now get the dispatch as property, but are there any important difference?

Answer 1

With mapDispatchToProps, you can use the mapped props in the component directly. (i.e. You don't need to implement handleClick as the wrapper of doSthOnClick explicitly.)

Also, if the presenters and containers are well-separated, the containers are mostly only used to dispatch actions, result in cleaner code. You may eventually do not need to deal with props.dispatch.