Rozbijam przykład todo Reduxa, aby spróbować go zrozumieć. Czytałem, że mapDispatchToProps
pozwala ci mapować akcje wysyłkowe jako rekwizyty, więc pomyślałem o przepisaniu, addTodo.js
aby 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 mapStateToProps
zaczynałam od komponentu AddTodo, więc nie byłam pewna, co jest nie tak. Moje przeczucie mówi, że connect()
spodziewa się , że mapStateToProps
to 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?
mapStateToProps
, można pominąć drugi argument doconnect
. Nie trzeba zdawaćnull
connect
powinien zaakceptować literał obiektu jako parametr zamiast listy argumentów.