点击提交按钮后"dispatch is not a function at onSubmit"

Question

在输入字段中输入文本并单击提交按钮后，发生错误：未捕获的类型错误：调度不是一个函数 在提交

连接状态和道具似乎是正确的。

可能出了什么问题？

*/TODOLIPUT*/
import React from 'react'
import { connect } from 'react-redux'
import {addTodo} from '../actions/index'
import {bindActionCreators} from 'redux'

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">
Add Todo
</button>
</form>
</div>
)
}
const mapStateToProps = (state) => {
return {
todos: state.todos
}
}
function matchDispatchToProps(dispatch){
return bindActionCreators({addTodo: addTodo}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(AddTodo)
/*TODOLIST*/
import React from 'react';
import {Todo} from './todo';
import { connect } from 'react-redux'
import {bindActionCreators} from 'redux'
const TodoList = ({ todos, onTodoClick }) => (
<ul>
{todos.map(todo =>
<Todo {...todo} />
)}
</ul>
)
function mapStateToProps(state) {
return {
todos:state.todos
}
}
export default connect(mapStateToProps, null)(TodoList)

/* REDUCER */
import {combineReducers} from 'redux';

export const reducers = combineReducers({
todos:todos
})

export function todos(state=[], action) {
switch(action.type) {
case 'ADD_TODO':
return [
...state,
{
text:text,
completed:false
}
]
default:
return state
}
} 
*/ACTION*/
export const addTodo = (text) => {
return {
type: 'ADD_TODO',
text
}
}

Answer 1

您可以进行两项更改以使代码正常工作。

首先：如果您在组件中使用dispatch，则无需使用mapDispatchToProps因为默认情况下，调度将按connect

提供给您

export default connect(mapStateToProps)(AddTodo)

第二：另一种方法是使用 bindActionCreators，它将您的动作创建者绑定到调度，因此在您的组件中不需要单独的调度事件

let AddTodo = (props) => {
let input
return (
<div>
<form onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
props.addTodo(input.value);
input.value = ''
}}>
<input ref={node => {
input = node
}} />
<button type="submit">
Add Todo
</button>
</form>
</div>
)
}

还有一件事，由于您在AddTodo参数中解决了要{dispatch}的道具，因此您将无法访问todos状态。

Answer 2

你不需要使用dispatch，因为你已经在mapDispatchToProps中使用了bindActionCreators。

bindActionCreators是一个帮助程序，使操作创建者能够直接调度操作。因此，您只需调用操作创建者，它应该会自动调度操作。

你可以使用dispatch而不传递mapDispatchToProps，也可以使用mapDispatchToProps注入的道具，而不使用dispatch。这就是为什么mapDispatchToProps这样称呼的原因——它允许你根据调度定义一些其他的道具，这样你就不需要再次使用它了。

检查这个： https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples