Невозможно прочитать свойство 'todos' из undefined ReactJs, Redux - PullRequest
Новая
       4

Невозможно прочитать свойство 'todos' из undefined ReactJs, Redux

0 голосов
/ 17 июня 2020

Я только начал знакомиться с Redux и застрял на этой ошибке. Я получаю сообщение об ошибке. Невозможно прочитать свойство 'todos' of undefined, в коде ниже, который находится в компоненте. : 

const mapStateToProps = (item) => {
return {
    todos: item.todos,
    numberPerPage: item.numberPerPage,
    currentPage: item.currentPage
};
};

Это мое хранилище: 

    const initialState = {
    todos: [],
    numberPerPage: 10,
    currentPage: 1
}

const reducer = (state =initialState, action) => {
    const { items, numberPerPage, currentPage } = state;
    switch (action.type) {
        case actionTypes.ADD_ITEM:
            return {
                ...state,
                todos: [
                    ...items,
                    {
                        value: action.value,
                        checked: action.checked,
                        _id: action.id,
                    },
                ],
                currentPage: Math.ceil((items.length + 1) / numberPerPage)
            };
        case actionTypes.GET_ALL:
            return {
                ...state,
                todos: action.items,
            };
    }
}

export default reducer;

Есть предложения?

1 Ответ

2 голосов
/ 17 июня 2020

В вашем редукторе нет регистра по умолчанию, из-за чего возникает ошибка.

Когда редуктор изначально настроен, redux отправляет @@redux/INIT action, и в этот момент ваш редуктор возвращает undefined, что приводит к ошибке при попытке доступа к значению состояния

Добавление случай по умолчанию для возврата состояния преодолеет эту проблему и решит вашу проблему 

const reducer = (state =initialState, action) => {
    const { items, numberPerPage, currentPage } = state;
    switch (action.type) {
        case actionTypes.ADD_ITEM:
            return {
                ...state,
                todos: [
                    ...items,
                    {
                        value: action.value,
                        checked: action.checked,
                        _id: action.id,
                    },
                ],
                currentPage: Math.ceil((items.length + 1) / numberPerPage)
            };
        case actionTypes.GET_ALL:
            return {
                ...state,
                todos: action.items,
            };

        default: return state;
    }
}
...