Getting a "Uncaught ReferenceError: type is not defined" error in React / Redux?

Question

I'm making a very simple ToDo list with Redux and React. I'm getting a "Uncaught ReferenceError: type is not defined" when trying to add a todo item. I have tried several things, here is my current code. Any ideas what I'm doing wrong? Thank you!

Here is my container:

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);

Here is the reducer:

import { ADD_TODO } from '../actions/types';

export default function(state=[], action) {
    switch(action.type) {
        case ADD_TODO:
            return [ action.payload.message, ...state ]
    }
    return state;
}

And ../reducers/index.js

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

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

export default rootReducer;

And the action:

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
    )
}

When trying to add a Todo item, I get the following error:

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>)

EDIT:

Here is the types.js file:

export const ADD_TODO = 'ADD_TODO';

I now added the types.js file, that only has the ADD_TODO.

userden
– userden

2017-07-02 15:07:04 +00:00
Commented Jul 2, 2017 at 15:07 — userden
– userden, Commented Jul 2, 2017 at 15:07
have you tried my fixing your issue with my answer below?

Mμ.
– Mμ.

2017-07-02 15:09:20 +00:00
Commented Jul 2, 2017 at 15:09 — Mμ.
– Mμ., Commented Jul 2, 2017 at 15:09

Mμ. · Accepted Answer · 2017-07-02 15:06:13Z

3

I think the main reason of the error is due to a typo in your addTodo function. Replace the parenthesis with curly braces

export function addTodo(message) {
    const action = {
        id: uid(),
        message: message
    };
    return {
        type: ADD_TODO,
        payload: action
    };
}

answered Jul 2, 2017 at 15:06

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

userden Over a year ago

That fixed the error, thank you! I will accept your answer in 5 min, when the system allows me to. I still don't see my todo items, I wonder what else am I doing wrong..

Mμ. Over a year ago

@Suomi you can create another question and I'll try to answer it.

userden Over a year ago

Thanks @D-reaper, I made a question here stackoverflow.com/questions/44872537/…

laruiss · Accepted Answer · 2020-05-19 12:15:28Z

0

what you only need to change to make it perfectly work, simply change:

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

edited May 19, 2020 at 12:15

laruiss

3,8261 gold badge21 silver badges29 bronze badges

answered May 19, 2020 at 11:36

Sabaoon Bedar

3,7652 gold badges33 silver badges41 bronze badges

Collectives™ on Stack Overflow

Getting a "Uncaught ReferenceError: type is not defined" error in React / Redux?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related