“调度”未定义

Question

我一直在调试这个程序，但没有任何线索，我一个字一个字地按照本教程尝试制作一个 TODO 应用程序，但我不明白为什么我会收到这个错误消息。

./src/containers.js
第 12 行：'dispatch' 未定义 no-undef
第 13 行：'dispatch' 未定义 no-undef

组件.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>
        )
    }
}

容器.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

减速器.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

索引.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")
)

Answer 1

而不是在这里声明：

mapDispatchToProps = (state) =>

使用调度：

mapDispatchToProps = (dispatch) =>

在containers.js.

文件：

容器组件可以分派动作。以类似的方式，您可以定义一个名为mapDispatchToProps ()的函数，该函数接收 dispatch()方法并返回您想要注入到表示组件中的回调道具。