Rozbijam przykład todo Reduxa, aby spróbować go zrozumieć. Czytałem, że mapDispatchToPropspozwala ci mapować akcje wysyłkowe jako rekwizyty, więc pomyślałem o przepisaniu, addTodo.jsaby użyć mapDispatchToProps zamiast wywoływania dispatch (addTodo ()). Nazwałem to addingTodo(). Coś takiego:
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
Jednak po uruchomieniu aplikacji, otrzymuję ten błąd: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Nigdy nie mapStateToPropszaczynałam od komponentu AddTodo, więc nie byłam pewna, co jest nie tak. Moje przeczucie mówi, że connect()spodziewa się , że mapStateToPropsto nastąpi mapDispatchToProps.
Działający oryginał wygląda następująco:
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
Pełne repozytorium można znaleźć tutaj .
Więc moje pytanie brzmi, czy możliwe jest wykonanie mapDispatchToProps bez mapStateToProps? Czy to, co próbuję zrobić, jest akceptowalną praktyką - jeśli nie, to dlaczego nie?