reactjs - How does connect work without mapDispatchToProps

Question

I was reading the example docs for redux and I found this example of a container component. Can someone explain why in this case mapDispatchToProps is not needed here. As well, how is the function getting the dispatch function?

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
let input

return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

Answer 1

connect()(AddTodo) will pass dispatch as a prop to AddTodo component, which is still useful even without state or predefined actions. Thats the reason mapDispatchToProps is not needed in your code

Now in your component let AddTodo = ({ dispatch }) => { you are destructuring your props to only access dispatch.

If you make use of mapDispatchToProps you will make your addTodo action available as a prop to your component and then call it like this.props.addTodo. So the above approach is an alternative. It depends on you to choose what you feel comfortable with

connect just passes store / dispatch through React context so you don't have to pass the store through many components. You don't have to use connect though. Any module / HOC pattern could work, connect just happens to be a convenient thing to use.

Using dispatch in the component or using mapDispatchToProps are one and the same thing.

However using mapDispatchToProps gives you much more flexibility in structuring your code and having all the action creators at one place.

As per the docs:

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

If a function is passed, it will be given dispatch as the first parameter. It’s up to you to return an object that somehow uses dispatch to bind action creators in your own way. (Tip: you may use the bindActionCreators() helper from Redux.)

If your mapDispatchToProps function is declared as taking two parameters, it will be called with dispatch as the first parameter and the props passed to the connected component as the second parameter, and will be re-invoked whenever the connected component receives new props. (The second parameter is normally referred to as ownProps by convention.)

If you do not supply your own mapDispatchToProps function or object full of action creators, the default mapDispatchToProps implementation just injects dispatch into your component’s props.