CODEWITHSUNDEEP
react-nativereduxreact-redux
Kartiikeya
Kartiikeya

Reputation: 2516

mapStateToProps() in connect() must return a plain object, Instead received Undefined

I have implemented redux to complete a TODO application.

My Todo code

 import { connect } from "react-redux";

import TodoList from "../components/TodoList.js";

// Here we will connect 

const mapStateToProps = state => {
    todos: state.todos
}

const mapDispatchToProps = dispatch => {
    toggleTodo: id => dispatch({ type: 'TOGGLE_TODOS', id })


}


export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

// Reducer

 const todos = (state = [], action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return [
                ...state, {
                    id: action.id,
                    text: action.text,
                    visibility: false
                }
            ]
        case 'TOGGLE-TODO':
            return state.map(todo => (todo.id === action.id)
                ?
                { ...todo, completed: !todo.completed }
                : todo)
        default:
            return state;
    }

}

export default todos;

Im getting an error at the end as 'mapStateToProps must receive a plain object, Instead received Undefined'.

please let me know how to resolve this.

Upvotes: 6

Views: 19217

Answers (3)

Narbhakshi
Narbhakshi

Reputation: 392

For me, the issue was an incorrect import statement.

in my code it was 

...
import { parseStore } from "../../parseStore"; // cause of ERROR
import reducer from "../../reducer";

const mapStateToProps = () => {
  return parseStore;
};

...

The import was failing and was being resulting in undefined. Resolved it by correcting the import statement from a named-import to default-import.

Upvotes: 0

xeiton
xeiton

Reputation: 1840

You have a syntax mistake. You should enclose your code in parenthesis.

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

This is in short:

const mapStateToProps = state => ( { } ) // This returns an empty object

Upvotes: 6

Paul McLoughlin
Paul McLoughlin

Reputation: 2289

You need to return the object, you can do it like so, see the brackets around the object.

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

You could also do

const mapStateToProps = state => { 
    return { todos: state.todos }; 
};

Both return an object.

Upvotes: 22

Related Questions