Estou quebrando o exemplo de tarefas do Redux para tentar entendê-lo. Eu li que mapDispatchToProps
permite mapear ações de despacho como adereços, então pensei em reescrever addTodo.js
para usar mapDispatchToProps em vez de chamar dispatch (addTodo ()). Eu chamei addingTodo()
. Algo assim:
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
No entanto, quando eu executar o aplicativo, eu recebo este erro: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.
. Eu nunca mapStateToProps
comecei com o componente AddTodo, então não tinha certeza do que estava errado. Minha intuição diz que connect()
espera mapStateToProps
preceder mapDispatchToProps
.
O original de trabalho tem a seguinte aparência:
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
O repo completo pode ser encontrado aqui .
Então, minha pergunta é, é possível fazer mapDispatchToProps sem mapStateToProps? O que estou tentando fazer é uma prática aceitável - se não, por que não?
mapStateToProps
, pode-se omitir o segundo argumento paraconnect
. Não é necessário passarnull
connect
deveria ter aceito um literal de objeto como parâmetro em vez de lista de argumentos.