Reactjs 得到一个;未捕获引用错误:未定义类型";React/Redux中出错?

Reactjs 得到一个;未捕获引用错误:未定义类型";React/Redux中出错?,reactjs,redux,react-redux,Reactjs,Redux,React Redux,我正在用Redux和React制作一个非常简单的待办事项列表。我在尝试添加todo项时遇到“未捕获引用错误:未定义类型”。我试过几种方法,下面是我当前的代码。知道我做错了什么吗?谢谢大家! 这是我的容器: import React, {Component} from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { addTodo } from

我正在用Redux和React制作一个非常简单的待办事项列表。我在尝试添加todo项时遇到“未捕获引用错误:未定义类型”。我试过几种方法,下面是我当前的代码。知道我做错了什么吗?谢谢大家!

这是我的容器:

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { addTodo } from '../actions/index';

class Todos extends Component {
    constructor(props) {
        super(props);
        this.state = {text: ''};
    }

    addTodo(e) {
        e.preventDefault();
        this.props.addTodo(this.state.text);
        this.setState({
            text: ''
        });
    }

    updateValue(e) {
        this.setState({text: e.target.value})
    }

    render() {
        return (
            <div>
                <form onSubmit={(e) => this.addTodo(e)}>
                    <input
                        placeholder="Add Todo"
                        value={this.state.text}
                        onChange={(e) => {
                            this.updateValue(e)
                        }}
                    />
                    <button type="submit">Add Todo</button>
                </form>
                <ul>
                    { this.props.todo.map((item) => {
                        return <li key={item.id}>{ item.message }</li>
                    })}
                </ul>
            </div>
        );
    }
}

function mapStateToProps({ todo }) {
    return { todo }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({addTodo}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Todos);
和../reducers/index.js

import { combineReducers } from 'redux';
import TodosReducer from './reducer_addTodo';

const rootReducer = combineReducers({
    todo: TodosReducer
});

export default rootReducer;
以及行动:

import { ADD_TODO } from './types';
const uid = () => Math.random().toString(34).slice(2);

export function addTodo(message) {
    const action = {
        id: uid(),
        message: message
    };
    return(
        type: ADD_TODO,
        payload: action
    )
}
尝试添加待办事项时,出现以下错误:

Uncaught ReferenceError: type is not defined
    at addTodo (bundle.js:21950)
    at Object.addTodo (bundle.js:21166)
    at Todos.addTodo (bundle.js:23541)
    at onSubmit (bundle.js:23562)
    at Object.ReactErrorUtils.invokeGuardedCallback (bundle.js:4532)
    at executeDispatch (bundle.js:4332)
    at Object.executeDispatchesInOrder (bundle.js:4355)
    at executeDispatchesAndRelease (bundle.js:3785)
    at executeDispatchesAndReleaseTopLevel (bundle.js:3796)
    at Array.forEach (<anonymous>)

我认为错误的主要原因是addTodo函数中的输入错误。用大括号替换圆括号

导出函数addTodo(消息){
常量动作={
id:uid(),
信息:信息
};
返回{
类型:ADD_TODO,
有效载荷:行动
};
}

您只需更改即可使其完美工作,只需更改:

return { 
    type: 'ADD_TODO', //this is string 
    payload: action
};

我现在添加了types.js文件,该文件只有ADD_TODO。您是否尝试过我用下面的答案修复您的问题?这修复了错误,谢谢!如果系统允许,我将在5分钟内接受你的回答。我仍然没有看到我的待办事项,我想知道我还做错了什么。@Suomi您可以创建另一个问题,我会尝试回答。谢谢@D-reaper,我在这里提出了一个问题
export const ADD_TODO = 'ADD_TODO';
return { 
    type: 'ADD_TODO', //this is string 
    payload: action
};