title: 'dispatch' is not defined
body: <p>I've been debugging this program but with no clue, I followed <a href="https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/" rel="nofollow noreferrer">this</a> tutorial word by word trying to make a TODO app but I could not figure out why I am getting this error message. </p>
  
  <blockquote>
    <p>./src/containers.js<br>
    Line 12:  'dispatch' is not defined  no-undef<br>
    Line 13:  'dispatch' is not defined  no-undef</p>
  </blockquote>
  
  <p>components.js</p>
  
  <pre><code>import React from 'react'
  
  class Todo extends React.Component {
  
      render() {
          const { todo } = this.props
  
          if (todo.isDone) {
              return &lt;strike&gt;{todo.text}&lt;/strike&gt;
          } else {
              return &lt;span&gt;{todo.text}&lt;/span&gt;
          }
      }
  }
  
  export default class TodoList extends React.Component {
      render() {
  
          const {todos, toggleTodo, addTodo } = this.props
          console.log(toggleTodo)
  
          return (
              &lt;div className="todo"&gt;
                  &lt;input type="text" placeholder="Add todo"/&gt;
                  &lt;ul className='todo__list'&gt;
                      {todos.map(t =&gt; (
                      &lt;li key={t.id} className='todo__item'&gt;
                          &lt;Todo todo={t} /&gt;
                      &lt;/li&gt;
                      ))}
                  &lt;/ul&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>containers.js</p>
  
  <pre><code>import * as components from './components.js'
  import { addTodo, toggleTodo } from './actions.js'
  import { connect } from 'react-redux'
  
  const mapStateToProps = (state) =&gt; {
      return {todos: state}
  }
  
  const mapDispatchToProps = (state) =&gt; {
      return {
          addTodo: text =&gt; dispatch(addTodo(text)),
          toggleTodo: id =&gt; dispatch(toggleTodo(id))
      }
  }
  
  const TodoList = connect(mapStateToProps, mapDispatchToProps)(components.TodoList)
  
  export default TodoList
  </code></pre>
  
  <p>reducers.js</p>
  
  <pre><code>const reducer = (todos = [], action) =&gt; {
      switch(action.type) {
          case 'ADD_TODO': {
              return [...todos, {id: action.id, text: action.text, completed: false}]
          }
          case 'TOGGLE_TODO': {
              return todos.map(todo =&gt; todo.id === action.id ? {...todo, completed: !todo.completed} : todo)
          }
  
          default: {
              return todos
          }
      }
  }
  
  export default reducer
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import { TodoList } from './containers'
  import { createStore } from 'redux'
  import { Provider } from 'react-redux'
  import reducer from './reducers'
  
  
  const store = createStore(reducer)
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;TodoList /&gt;
      &lt;/Provider&gt;,
      document.getElementById("app")
  )
  </code></pre>