React Reducer返回未定义

Question

I have multiple properties already in mapStateToProps(state) but this particular bit is returning undefined - the disableselectors

return {
    token: state.token,
    url: state.url,
    disableselectors: state.disableselectors
}

so here is my reducer, I'm already returning a default state (same as my other reducers)

const initState = "ENABLED"; 

export default function disableSelectorReducer(state = initState, action){
    switch(action.type){
        case 'SET_DISABLEDSELECTORS':
            return action.disableselectors;

        default:
            return state;
    }
}

when I try to access it on my component it returns undefined

doUpdate(){
let x = this.props.disableselectors;
}

Component where I set the state and action

 const disableselectors = this.state.disableselectors;
        disableselectors.disableSelectorProperty = "DISABLED";
        this.setState({disableselectors});
        this.props.setDisableSelectors(this.state.disableselectors.disableSelectorProperty);

root reducer

const rootReducer = combineReducers({
    status,
    disableSelectors
})

export default rootReducer;

are there any issue for this? since my other props and reducers are working fine

Answer 1

With combineReducers , the property names that are passed in become the properties in the combined state. Because your combineReducers looks like this:

const rootReducer = combineReducers({
  status,
  disableSelectors
})

...your mapping of state to props

return {
  token: state.token,
  url: state.url,
  disableselectors: state.disableselectors
};

...is incorrect since the state you're looking for is under a disableSelectors property, not a disableselectors property (notice the capitalization you're using doesn't match the capitalization in your combineReducers ). Either update your mapping function to access disableSelectors or update your combineReducers so the property is disableselectors .

(personally I'd recommend always using camelCase to avoid this sort of issue).