Je lisais les exemples de documentation pour redux et j'ai trouvé cet exemple de composant conteneur. Quelqu'un peut-il expliquer pourquoi, dans ce cas, mapDispatchToProps n'est pas nécessaire ici. De plus, comment la fonction obtient-elle la fonction de répartition?

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
7
user6127082 16 janv. 2017 à 08:47

2 réponses

Meilleure réponse

connect()(AddTodo) passera dispatch en tant que composant prop to AddTodo, ce qui est toujours utile même sans état ni actions prédéfinies. C'est la raison pour laquelle mapDispatchToProps n'est pas nécessaire dans votre code

Maintenant, dans votre composant let AddTodo = ({ dispatch }) => {, vous déstructurez vos accessoires pour n'accéder qu'à dispatch.

Si vous utilisez mapDispatchToProps, vous rendrez votre action addTodo disponible en tant qu'accessoire pour votre composant, puis l'appellerez comme this.props.addTodo. L'approche ci-dessus est donc une alternative. Cela dépend de vous de choisir ce avec quoi vous vous sentez à l'aise

connect passe simplement store / dispatch à travers le contexte React afin que vous n'ayez pas à passer le magasin à travers de nombreux composants. Vous n'êtes pas obligé d'utiliser connect. N'importe quel modèle de module / HOC pourrait fonctionner, la connexion se trouve être une chose pratique à utiliser.

Utiliser dispatch dans le composant ou utiliser mapDispatchToProps sont une seule et même chose.

Cependant, l'utilisation de mapDispatchToProps vous donne beaucoup plus de flexibilité pour structurer votre code et avoir tous les créateurs d'action en un seul endroit.

Conformément aux documents :

[mapDispatchToProps (dispatch, [ownProps]): dispatchProps] (objet ou fonction):

Si un objet est passé , chaque fonction à l'intérieur est supposée être un créateur d'action Redux. Un objet avec les mêmes noms de fonction, mais avec chaque créateur d'action inclus dans un appel de répartition afin qu'ils puissent être invoquée directement, sera fusionnée dans les accessoires du composant.

Si une fonction est transmise, elle sera envoyée comme premier paramètre. C'est à vous de renvoyer un objet qui utilise d'une manière ou d'une autre envoyer pour lier les créateurs d'action à votre manière. (Astuce: vous pouvez utiliser l'aide bindActionCreators() de Redux.)

Si votre fonction mapDispatchToProps est déclarée comme prenant deux paramètres, il sera appelé avec dispatch comme premier paramètre et les accessoires passés au composant connecté comme deuxième paramètre, et sera ré-invoqué chaque fois que le composant connecté reçoit un nouveau accessoires. (Le deuxième paramètre est normalement appelé ownProps par convention.)

Si vous ne fournissez pas votre propre fonction ou objet mapDispatchToProps plein de créateurs d'action, la valeur par défaut mapDispatchToProps La mise en œuvre injecte simplement la répartition dans les accessoires de votre composant.

8
Shubham Khatri 26 juil. 2017 à 08:40

Les gens ont tendance à écrire react de deux manières. L'une est une approche basée sur class que vous rencontrerez normalement. Il utilise essentiellement des classes.

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

            //
        );
    }
}

Et l'autre est functional approach.

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

Ainsi, en approche fonctionnelle, vous pouvez transmettre des données en tant que arguments à vos composants. Donc, si vous avez passé dispatch du composant parent à ce composant dans props. Vous pouvez y accéder en utilisant props.dispatch.

0
Anurag Awasthi 16 janv. 2017 à 06:03