1
我一直在調試這個程序,但沒有任何線索,我跟着this逐字教程嘗試做一個TODO應用程序,但我無法弄清楚爲什麼我得到這個錯誤信息。'dispatch'沒有定義
./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")
)