Я розбиваю приклад Redux, щоб спробувати зрозуміти його. Я прочитав, що mapDispatchToProps
дозволяє відобразити диспетчерські дії як реквізит, тому я подумав переписати, addTodo.js
щоб використовувати mapDispatchToProps замість виклику диспетчеру (addTodo ()). Я зателефонував addingTodo()
. Щось на зразок цього:
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
Тим НЕ менше, коли я запустити додаток, я отримую цю помилку: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.
. Я ніколи не mapStateToProps
починав з компонента AddTodo, тому не був впевнений, що не так. Моє відчуття кишки говорить про те, що він connect()
очікує mapStateToProps
переду mapDispatchToProps
.
Робочий оригінал виглядає так:
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
Повне репо можна знайти тут .
Тож моє запитання: чи можна робити mapDispatchToProps без mapStateToProps? Чи є те, що я намагаюся зробити прийнятною практикою - якщо ні, чому ні?