Estoy separando el ejemplo de todo de Redux para tratar de entenderlo. Leí que mapDispatchToProps le permite mapear acciones de envío 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, aparece este error: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo. . Para empezar, nunca usé mapStateToProps en el componente AddTodo, por lo que no estaba seguro de qué estaba mal. Mi instinto dice que connect() espera que mapStateToProps preceda a 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 AddTodoEl 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?
Sí tu puedes. Simplemente pase null como primer argumento:
AddTodo = connect( null, mapDispatchToProps )(AddTodo) Sí, no es solo una práctica aceptable, es una forma recomendada de desencadenar acciones. El uso de mapDispatchToProps permite ocultar el hecho de usar redux dentro de sus componentes de reacción