Estoy rompiendo todo el ejemplo de Redux para tratar de entenderlo. Leí que mapDispatchToProps
te permite mapear acciones de despacho como accesorios, así que pensé en reescribir addTodo.js
para usar mapDispatchToProps en lugar de llamar a dispatch (addTodo ()). Lo llamé addingTodo()
. Algo como esto:
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
Sin embargo, cuando ejecuto la aplicación, me sale este error: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.
. Nunca solía mapStateToProps
empezar con el componente AddTodo, así que no estaba seguro de qué estaba mal. Mi instinto dice que connect()
espera mapStateToProps
preceder mapDispatchToProps
.
El original de trabajo se ve así:
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
El repositorio completo se puede encontrar aquí .
Entonces mi pregunta es, ¿es posible hacer mapDispatchToProps sin mapStateToProps? ¿Es lo que estoy tratando de hacer una práctica aceptable? Si no, ¿por qué no?
mapStateToProps
, se puede omitir el segundo argumento deconnect
. No es necesario pasarnull
connect
debería haber aceptado un objeto literal como parámetro en lugar de una lista de argumentos.