Puis-je mapDispatchToProps sans mapStateToProps dans Redux?
Je suis briser Redux " todo exemple pour essayer de comprendre. J'ai lu que mapDispatchToProps
permet à la carte de répartition des actions comme les accessoires, donc j'ai pensé à la réécriture addTodo.js
à utiliser mapDispatchToProps au lieu d'appeler l'expédition(addTodo()). Je l'ai appelé addingTodo()
. Quelque chose comme ceci:
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
Cependant, lorsque je lance l'application, j'obtiens cette erreur: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.
. Je n'ai jamais utilisé mapStateToProps
pour commencer AddTodo composant, donc je n'étais pas sûr de ce qui n'allait pas. Mon instinct dit que connect()
attend mapStateToProps
précéder mapDispatchToProps
.
Le travail original ressemble à ceci:
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
Complète repo peut être trouvé ici.
Donc ma question est, est-il possible de faire mapDispatchToProps sans mapStateToProps? Est ce que je suis en train de faire une pratique acceptable - si non, pourquoi pas?
Vous devez vous connecter pour publier un commentaire.
Oui, vous le pouvez. Il suffit de passer
null
comme premier argument:Oui, ce n'est pas seulement une pratique acceptable, il est recommandé de déclencher des actions. À l'aide de
mapDispatchToProps
permet de cacher le fait d'utiliser un redux à l'intérieur de votre réagissent composantsmapStateToProps
, on peut omettre le deuxième argument deconnect
. Il n'est pas nécessaire de passernull
null
et pasundefined
? Edit: Apparemment les deux sont ok selon le manuel: github.com/reduxjs/react-redux/blob/master/docs/...function myfunc(prop) { return prop === undefined }
serait de retour vrai à la fois pourmyfunc()
etmyfunc(undefined)
. En passant pas défini, c'est comme ne pas passer quelque chose à tous. Considérant que le passage de la valeur null est comme, "j'ai passé quelque chose, mais il est en fait rien".arguments.length
de voir comment de nombreux arguments que vous avez fournies, et comment vous signifiait pour appeler la fonction.(function(f) { return arguments.length; })(undefined) // 1
,(function(f) { return arguments.length; })() // 0
. Blog intéressant sur ce sujet: blog.sentry.io/2016/02/03/enveloppez-javascript-fonctionsconnect
devrait avoir accepté un littéral d'objet en tant que paramètre à la place de la liste d'arguments.