'ディスパッチ'が定義されていません

私はこのプログラムをデバッグしてきましたが、手がかりがないので、チュートリアルの言葉でTODOアプリケーションを作ろうとしましたが、なぜこのエラーメッセージが表示されるのか分かりませんでした。'ディスパッチ'が定義されていません

./src/containers.js
ライン12 'ディスパッチ' が
無undefをライン13に定義されていない： 'ディスパッチ' は

無undefをcomponents.jsに定義されていません

import React from 'react' 

class Todo extends React.Component { 

    render() { 
     const { todo } = this.props 

     if (todo.isDone) { 
      return <strike>{todo.text}</strike> 
     } else { 
      return <span>{todo.text}</span> 
     } 
    } 
} 

export default class TodoList extends React.Component { 
    render() { 

     const {todos, toggleTodo, addTodo } = this.props 
     console.log(toggleTodo) 

     return (
      <div className="todo"> 
       <input type="text" placeholder="Add todo"/> 
       <ul className='todo__list'> 
        {todos.map(t => (
        <li key={t.id} className='todo__item'> 
         <Todo todo={t} /> 
        </li> 
        ))} 
       </ul> 
      </div> 
     ) 
    } 
}

containers.js

import * as components from './components.js' 
import { addTodo, toggleTodo } from './actions.js' 
import { connect } from 'react-redux' 

const mapStateToProps = (state) => { 
    return {todos: state} 
} 

const mapDispatchToProps = (state) => { 
    return { 
     addTodo: text => dispatch(addTodo(text)), 
     toggleTodo: id => dispatch(toggleTodo(id)) 
    } 
} 

const TodoList = connect(mapStateToProps, mapDispatchToProps)(components.TodoList) 

export default TodoList

reducers.js

const reducer = (todos = [], action) => { 
    switch(action.type) { 
     case 'ADD_TODO': { 
      return [...todos, {id: action.id, text: action.text, completed: false}] 
     } 
     case 'TOGGLE_TODO': { 
      return todos.map(todo => todo.id === action.id ? {...todo, completed: !todo.completed} : todo) 
     } 

     default: { 
      return todos 
     } 
    } 
} 

export default reducer

index.jsここ

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(
    <Provider store={store}> 
     <TodoList /> 
    </Provider>, 
    document.getElementById("app") 
)

出典

2017-08-30 齐天大圣