web-dev-qa-db-ja.com

connect（）のmapStateToProps（）はプレーンオブジェクトを返す必要があり、代わりにUndefinedを受け取ります

TODOアプリケーションを完成させるためにreduxを実装しました。

私のTodoコード

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

//レデューサー

 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;

「mapStateToPropsはプレーンオブジェクトを受け取る必要があり、代わりに未定義を受け取った」ため、最後にエラーが発生します。

これを解決する方法を教えてください。

react-nativereduxreact-redux
4
Kartiikeya

あなたはオブジェクトを返す必要があります、あなたはそうすることができます、オブジェクトの周りの括弧を見てください。

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

あなたもすることができます

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

どちらもオブジェクトを返します。

10
Paul McLoughlin

構文に誤りがあります。コードは括弧で囲む必要があります。

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

これは簡単に言えば：

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

私にとっての問題は、誤ったimportステートメントでした。

私のコードでは

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

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

...

インポートは失敗し、undefinedが発生していました。名前付きインポートからデフォルトインポートへのインポート文を修正することで解決しました。

0
Narbhakshi