Sto rompendo l'esempio di Redux todo per cercare di capirlo. Ho letto che mapDispatchToProps
ti consente di mappare le azioni di invio come oggetti di scena, quindi ho pensato di riscrivere addTodo.js
per utilizzare mapDispatchToProps invece di chiamare dispatch (addTodo ()). L'ho chiamato addingTodo()
. Qualcosa come questo:
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
Tuttavia, quando si esegue l'applicazione, ottengo questo errore: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.
. Non ho mai mapStateToProps
iniziato con il componente AddTodo, quindi non ero sicuro di cosa fosse sbagliato. Il mio istinto dice che connect()
dovrebbe mapStateToProps
precedere mapDispatchToProps
.
L'originale funzionante ha questo aspetto:
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
Il repo completo può essere trovato qui .
Quindi la mia domanda è: è possibile eseguire mapDispatchToProps senza mapStateToProps? Quello che sto cercando di fare è una pratica accettabile - se no, perché no?