我正在分解 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.
。我从来没有在 AddTodo 组件上使用 mapStateToProps
,所以我不确定出了什么问题。我的直觉是 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
可以在 here 中找到完整的存储库。
所以我的问题是,是否可以在没有 mapStateToProps 的情况下执行 mapDispatchToProps?我正在尝试做一个可接受的做法 - 如果不是,为什么不呢?
是的你可以。只需将 null
作为第一个参数传递:
AddTodo = connect(
null,
mapDispatchToProps
)(AddTodo)
是的,这不仅仅是可接受的做法,它是触发操作的推荐方式。使用 mapDispatchToProps
可以隐藏在你的 react 组件中使用 redux 的事实
不定期副业成功案例分享
mapStateToProps
时,可以省略connect
的第二个参数。不必通过null
connect
应该接受对象文字作为参数而不是参数列表。