How does connect work without mapDispatchToProps
Solution 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 defaultmapDispatchToProps
implementation just injects dispatch into your component’s props.