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
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
mapDispatchToPropsfunction 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
mapDispatchToPropsfunction or object full of action creators, the defaultmapDispatchToPropsimplementation just injects dispatch into your component’s props.
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) => {
return(
<div><h2>{{props.name}}</h2></div>
)
}
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.