Title: How does connect work without mapDispatchToProps
Tags: reactjs;redux;react-redux
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 }) =&gt; {
let input
return (
<div&gt;
<form onSubmit={e =&gt; {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(addTodo(input.value))
input.value = ''
}}&gt;
<input ref={node =&gt; {
input = node
}} /&gt;
<button type="submit"&gt;
Add Todo
</button&gt;
</form&gt;
</div&gt;
AddTodo = connect()(AddTodo)
export default AddTodo

Here is the accepted answer: 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 }) =&gt; { 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.
Comment for this answer: In case I don't need `mapDispatchToProps`, should I pass an empty object or just leave it empty and let it inject the `dispatch` into my component. Does it affect performance in any way?
Comment for this answer: @Norbert In case you don't need mapDispatchToProps you can simply avoid the second argument altogether. All these are different ways to do the same thing and hence don't have much performance difference

Here is another answer: People tend to write react in two ways. One is class based approach which you would normally encounter. It basically uses classes.
class App extends Component{
constructor(){
super();
this.state={}
render(){
return(
//
);
and other is functional approach.
const App = (props) =&gt; {
return(
<div&gt;<h2&gt;{{props.name}}</h2&gt;</div&gt;
So, in functional approach you can pass data as arguments to your components.
So, if you have passed dispatch from parent component to this component in props . You can access it using props.dispatch.
Comment for this answer: I understand that concept but I don't know how in this case the component is receiving dispatch. I was under the impression that to receive the dispatch function, I would need to pass a mapDispatchToProps which in this case is not so. Is it the case that just because I pass the component to the connect function it is somehow receives dispatch now?
Comment for this answer: dispatch would be passed to this component from parent component as a prop.
Comment for this answer: but this approach is not good. You should use connect to pass dispatch and props. read the comment of gaearon [here](https://github.com/reactjs/redux/issues/1176)

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:01/16/17', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<reactjs><redux><react-redux>', 'Title': 'How does connect work without mapDispatchToProps', 'ViewCount': 5374, 'id': 41670146, 'user_AboutMe': None, 'user_AccountId': None, 'user_DisplayName': None, 'user_Reputation': None, 'user_Views': None, 'user_id': None}}