I am breaking apart Redux' todo example to try to understand it. I read that mapDispatchToProps
allows you to map dispatch actions as props, so I thought of rewriting addTodo.js
to use mapDispatchToProps instead of calling dispatch(addTodo()). I called it addingTodo()
. Something like this:
import React from 'react';
import {connect} from 'react-redux';
import addTodo from '../actions';
let AddTodo = ({addingTodo}) => {
let input;
return (
<div>
<form onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
addingTodo(input.value)
input.value = ""
}}>
<input ref={node => {
input = node
}} />
<button type="submit">Submit</button>
</form>
</div>
)
}
const mapDispatchToProps = {
addingTodo: addTodo
}
AddTodo = connect(
mapDispatchToProps
)(AddTodo)
export default AddTodo
However, when I run the app, I get this error: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.
. I never used mapStateToProps
to begin with on AddTodo component, so I was not sure what was wrong. My gut feeling says that connect()
expects mapStateToProps
to precede mapDispatchToProps
.
The working original looks like this:
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">Submit</button>
</form>
</div>
)
}
AddTodo = connect()(AddTodo)
export default AddTodo
Complete repo can be found here.
So my question is, is it possible to do mapDispatchToProps without mapStateToProps? Is what I am trying to do an acceptable practice - if not, why not?
Yes, you can. Just pass null
as first argument:
AddTodo = connect(
null,
mapDispatchToProps
)(AddTodo)
Yes, it's not just acceptable practice, it's recommended way to trigger actions. Using mapDispatchToProps
allows to hide the fact of using redux inside your react components