Estaba leyendo los documentos de ejemplo para redux y encontré este ejemplo de un componente de contenedor. ¿Alguien puede explicar por qué en este caso mapDispatchToProps no es necesario aquí? Además, ¿cómo obtiene la función la función de despacho?
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 AddTodoconnect()(AddTodo) pasará el dispatch como prop to AddTodo , que sigue siendo útil incluso sin estado o acciones predefinidas. Esa es la razón por la que mapDispatchToProps no es necesario en su código
Ahora, en su componente, let AddTodo = ({ dispatch }) => { está desestructurando sus accesorios para acceder solo al dispatch .
Si utiliza mapDispatchToProps , hará que su acción addTodo esté disponible como accesorio para su componente y luego la llamará this.props.addTodo . Así que el enfoque anterior es una alternativa. Depende de ti elegir con qué te sientes cómodo
connect solo pasa store / dispatch a través del contexto React para que no tenga que pasar la tienda a través de muchos componentes. Sin embargo, no tienes que usar connect. Cualquier patrón de módulo / HOC podría funcionar, conectar resulta ser algo conveniente de usar.
Usar el dispatch en el componente o usar mapDispatchToProps es lo mismo.
Sin embargo, el uso mapDispatchToProps le brinda mucha más flexibilidad para estructurar su código y tener a todos los creadores de acciones en un solo lugar.
Según los documentos :
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Objeto o Función):
Si se pasa un objeto , se supone que cada función dentro de él es un creador de acciones de Redux. Un objeto con los mismos nombres de función, pero con cada creador de acciones envuelto en una llamada de envío para que puedan invocarse directamente, se fusionará con los accesorios del componente.
Si se pasa una función, se le dará despacho como el primer parámetro. Depende de usted devolver un objeto que de alguna manera use el envío para vincular a los creadores de acciones a su manera. (Consejo: puede usar el ayudante
bindActionCreators()de Redux).Si se declara que su función
mapDispatchToPropstoma dos parámetros, se llamará con dispatch como primer parámetro y los accesorios se pasarán al componente conectado como segundo parámetro, y se volverá a invocar cada vez que el componente conectado reciba nuevos accesorios. (El segundo parámetro normalmente se denomina ownProps por convención).Si no proporciona su propia función
mapDispatchToPropsu objeto lleno de creadores de acciones, la implementación predeterminadamapDispatchToPropssimplemente inyecta el envío en los accesorios de su componente.
La gente tiende a escribir react de dos maneras. Uno es el enfoque basado en la class que normalmente encontraría. Básicamente utiliza clases.
class App extends Component{ constructor(){ super(); this.state={} } render(){ return( // ); } } y otro es functional approach .
const App = (props) => { return( <div><h2>{{props.name}}</h2></div> ) } Entonces, en un enfoque funcional, puede pasar datos como arguments a sus componentes. Entonces, si ha pasado el dispatch del componente principal a este componente en props . Puede acceder a él usando props.dispatch .