"dispatch is not a function at onSubmit" after clicking submit button - reactjs

Question

After entering the text in input field and clicking submit button the error occurs: Uncaught TypeError: dispatch is not a function
at onSubmit
Connecting state and props seems to be correct.
What could be wrong?
*/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

You can make two changes to get your code working.
First: If you use dispatch in your component, you need not use mapDispatchToProps since dispatch will be made available to you by default by connect
export default connect(mapStateToProps)(AddTodo)
Second: The other way is to make use of bindActionCreators which binds your action creators to dispatch and hence there is not need for a separate dispatch event in your component
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>
)
}
One more thing,since your are resolvind the props to {dispatch} in your AddTodo argument, you wont be having access to the todos state.

Answer 2

You don't need to use dispatch, since you have used bindActionCreators in your mapDispatchToProps .
bindActionCreators is a helper that enables action creators to directly dispatch actions. So you can just invoke your action creator and it should automatically dispatch the action.
You can either use dispatch and not pass mapDispatchToProps, or you can use the props injected by mapDispatchToProps, and not use dispatch. This is why mapDispatchToProps is called this way—it lets you define some other props based on dispatch so you don’t need to use it again.
Check this: https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples