Puis-je mapDispatchToProps sans mapStateToProps dans Redux?
Je suis en train de casser L'exemple todo de Redux pour essayer de le comprendre. J'ai lu que mapDispatchToProps
vous permet de mapper les actions de répartition en tant qu'Accessoires, donc j'ai pensé à réécrire addTodo.js
pour utiliser mapDispatchToProps au lieu d'appeler dispatch(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 sur le composant AddTodo, donc je n'étais pas sûr de ce qui n'allait pas. Mon instinct dit que connect()
s'attend mapStateToProps
précéder mapDispatchToProps
.
L'original de travail 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
Repo complet peut être trouvé ici .
Donc ma question Est, est-il possible de faire mapDispatchToProps sans mapStateToProps? Ce que j'essaie de faire est - il une pratique acceptable-sinon, pourquoi pas?
1 réponses
Oui, vous pouvez. Il suffit de passer null
comme premier argument:
AddTodo = connect(
null,
mapDispatchToProps
)(AddTodo)
Oui, ce n'est pas seulement une pratique acceptable, c'est un moyen recommandé de déclencher des actions. L'utilisation de {[2] } permet de masquer le fait d'utiliser redux dans vos composants react