Ich zerlege Redux 'ToDo-Beispiel, um zu versuchen, es zu verstehen. Ich habe gelesen, mapDispatchToProps
dass Sie damit Versandaktionen als Requisiten addTodo.js
zuordnen können. Daher habe ich mir überlegt, neu zu schreiben , um mapDispatchToProps zu verwenden, anstatt dispatch (addTodo ()) aufzurufen. Ich habe es genannt addingTodo()
. Etwas wie das:
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
Wenn ich die App ausführe, wird jedoch folgende Fehlermeldung angezeigt : Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.
. Ich habe nie mapStateToProps
mit der AddTodo-Komponente begonnen, daher war ich mir nicht sicher, was falsch war. Mein Bauchgefühl sagt, dass connect()
erwartet wird mapStateToProps
, vorauszugehen mapDispatchToProps
.
Das funktionierende Original sieht folgendermaßen aus:
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
Das komplette Repo finden Sie hier .
Meine Frage ist also, ist es möglich, mapDispatchToProps ohne mapStateToProps auszuführen? Ist das, was ich versuche, eine akzeptable Praxis zu machen - wenn nicht, warum nicht?