para - reactjs redux

Cómo funciona connect sin mapDispatchToProps

Question

Estaba leyendo los documentos de ejemplo para redux y encontré este ejemplo de un componente contenedor. ¿Alguien puede explicar por qué en este caso mapDispatchToProps no es necesario aquí? Además, ¿cómo está la función obteniendo 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 AddTodo

Answer 1

Las personas tienden a escribir, react de dos maneras. Uno es el enfoque basado en la class que normalmente encontrarías. Básicamente usa clases.

class App extends Component{
    constructor(){
        super();
        this.state={}
    }
    render(){
        return(

            //
        );
    }
}

y otro es un functional approach .

const App = (props) => {
​
    return(
        <div><h2>{{props.name}}</h2></div>
    )
}

Entonces, en el 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 utilizando props.dispatch .

Answer 2

connect()(AddTodo) pasará el dispatch como un prop to AddTodo componente prop to AddTodo , que sigue siendo útil incluso sin estado o acciones predefinidas. mapDispatchToProps es la razón por la que mapDispatchToProps no es necesario en tu código

Ahora, en su componente, let AddTodo = ({ dispatch }) => { usted 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 lo llamará así: this.props.addTodo . Entonces el enfoque anterior es una alternativa. Depende de usted elegir con qué se siente cómodo

connect solo pasa store / dispatch través del contexto Reaccionar para que no tengas que pasar por la tienda a través de muchos componentes. Sin embargo, no es necesario que uses connect. Cualquier patrón de módulo / HOC podría funcionar, conectar resulta ser conveniente de usar.

Usar dispatch en el componente o usar mapDispatchToProps es una y la misma cosa.

Sin embargo, el uso de mapDispatchToProps le brinda mucha más flexibilidad para estructurar su código y tener todos los creadores de acción en un solo lugar.

De acuerdo con 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 acción de Redux. Un objeto con los mismos nombres de funciones, pero con cada creador de acciones envuelto en una llamada de despacho para que puedan invocarse directamente, se fusionará en los accesorios del componente.

Si se pasa una función, se le enviará como primer parámetro. Depende de usted devolver un objeto que de alguna manera utiliza el envío para vincular a los creadores de acción a su manera. (Sugerencia: puede usar el ayudante bindActionCreators() de Redux).

Si su función mapDispatchToProps está declarada como tomando dos parámetros, se mapDispatchToProps con dispatch como primer parámetro y los props pasarán al componente conectado como el segundo parámetro, y se volverá a invocar cada vez que el componente conectado reciba nuevos apoyos. (El segundo parámetro normalmente se conoce como ownProps por convención).

Si no proporciona su propia función mapDispatchToProps u objeto lleno de creadores de acciones, la implementación predeterminada de mapDispatchToProps simplemente inyecta el envío en los accesorios de su componente.