Как исправить mapStateToProps от доступа к неопределенному ключу состояния без проверки вручную?

Question

Я создаю одностраничное веб-приложение с React, состояние которого сохраняется с помощью Redux. Когда я получаю доступ к чему-то вроде state.workspace.guest.data в mapStateToProps(), это вызывает исключение, вызывающее сбой приложения.

Похоже, mapStateToProps() вызывается до componentDidMount(), что вызывает this.props.getGuests() действие, которое фактически вызывает инициализацию state.workspace.guest. Страница загружается правильно, когда я вручную ввожу URL и нажимаю ввод. Однако mapStateToProps() вызывает исключение при навигации по приложению, где state.workspace.guest равно undefined.

Возможное решение - проверить, определено ли state.workspace.guest. Тем не менее, я чувствую, есть лучший способ сделать это? Ответы в следующей ссылке предлагают использовать селекторы. Я не уверен, что это решение моей проблемы, учитывая, что я новичок в Redux.

реагирует на триггеры js mapStateToProps Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного

Вот функции отображения.

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        getGuests: Actions.getGuests
    }, dispatch);
}

function mapStateToProps(state, ownProps) {
    return {
        guests : state.workspace.guest.data
    }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(GuestSearchTable));

Функция componentDidMount(), которая фактически запускает действие, которое в свою очередь загружает данные.

    componentDidMount() {
        this.props.getGuests();
    }

Вот редуктор.

const initialState = {
    data : []
};

function guestReducer(state = initialState, action) {
    switch (action.type) {
        case Actions.GET_GUESTS: {
            return {
                ...state,
                data : action.payload.data
            };
        }

        case Actions.GET_GUEST: {
            return {
                ...state,
                guest: action.payload.data
            };
        }

        case Actions.SAVE_GUEST: {
            return {
                ...state,
                guest: action.payload.data
            };
        }

        default: {
            return state;
        }
    }
};

Я ожидаю, что начальное значение state.workspace.guest будет { data : [] }. Но фактическое значение undefined. Та же проблема появляется на всех других страницах.

Answer 1

Вы пытаетесь получить доступ к данным с гостевого ключа.

function mapStateToProps(state, ownProps) {
    return {
        guests : state.workspace.guest.data
    }
}

Я думаю, что вы хотите получить доступ к state.workspace.data или вам нужно изменить имя ключа на гостей в редукторе и в состоянии инициализации следующим образом:

return {
   guests: state.workspace.guests
}