如何修复mapStateToProps避免访问未定义的状态键而无需手动检查？

Question

I am creating a single page web application with React, with the state stored using Redux. When I access something like state.workspace.guest.data in mapStateToProps() it causes an exception crashing the application.

It appears mapStateToProps() is invoked before componentDidMount() , which invokes this.props.getGuests() action that actually causes state.workspace.guest to be initialized. The page loads properly when I manually enter the URL and press enter. However, mapStateToProps() causes an exception when I navigate through the application, with state.workspace.guest being undefined .

A possible solution would be to check if state.workspace.guest is defined. However, I feel there is a better way to do it? The answers in the following link suggest to use selectors. I am not sure if this is the solution to my problem, given I am new to Redux.

react js mapStateToProps triggers Uncaught TypeError: Cannot read property 'map' of undefined

Here are the mapping functions.

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

The componentDidMount() function which actually triggers an action which in turn loads the data.

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

Here is the reducer.

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

I expect the initial value of the state.workspace.guest to be { data : [] } . But the actual value is undefined . The same problem appears in all the other pages.

Answer 1

You are trying to access data from guest key.

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

I think you want to access state.workspace.data or you have to change key name to guests in reducer and the intialize state as follow:

return {
   guests: state.workspace.guests
}