我正在分解Redux的todo示例以尝试理解它。我读到它mapDispatchToProps
允许您将调度动作映射为道具,因此我想到重写addTodo.js
以使用mapDispatchToProps而不是调用dispatch(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
完整的仓库可以在这里找到。
所以我的问题是,有没有mapStateToProps可以做mapDispatchToProps吗?我想做的是一种可接受的做法吗?如果没有,为什么呢?
是的你可以。只是
null
作为第一个参数传递:是的,这不仅是可以接受的做法,还是触发操作的推荐方法。使用
mapDispatchToProps
允许隐藏在React组件中使用Redux的事实