React / Redux无法读取未定义的属性“ currentOpportunities”

Question

I am having trouble with my Redux mapStateToProps function throwing an error saying that state.currentOpportunities is undefined. The weird thing about this is that the initial State that is defined in the organizationReducer can only be reached under state._root.entries 1 .organization.currentOpportunity rather than by state.organization.currentOpportunity when I console.log I console.log state in the main index.js file

Console.log(States)

Main App.js file

const initialState = {}
const history = createHistory();
const store = configureStore(initialState, history);
const MOUNT_NODE = document.getElementById('app');

const render = messages => {
  ReactDOM.render(
    <Provider store={store}>
      <LanguageProvider messages={messages}>
        <ConnectedRouter history={history}>
          <App />
        </ConnectedRouter>
      </LanguageProvider>
    </Provider>,
    MOUNT_NODE,
  );
};

organizationReducer.js

const initialState = {
    currentOpportunities: [],
    expiredOpportunities: []
};

export default function (state=initialState, action) {
    switch(action.type) {
        case FETCH_ORGANIZATION_OPPORTUNITIES:
            return {...state, data: action.payload}
        case FETCH_CURRENT_OPPORTUNITIES: 
            return{...state, currentOpportunities: action.payload}
        case FETCH_EXPIRED_OPPORTUNITIES: 
            return{...state, expiredOpportunities: action.payload}
        default:
            return state
    }
}

My root reducer file

export default function createReducer(injectedReducers) {
  return combineReducers({
    organization: organizationReducer,
    ...injectedReducers
  })
}

index.js file

const mapStatetoProps = (state) => {
  console.log(state)
  return {
    currentOpportunities: state.organization.currentOpportunities,
    expiredOpportunities: state.organization.expiredOpportunities
  };
}

export default connect(mapStatetoProps, actions)(OpportunitiesPage);

Does anyone know what might be happening here?

Answer 1

state.organization.currentOpportunity is undefined because state is an immutable map and you try to access its field like it's an object. ¹

You must update your reducer logic to use the immutable API where you merge objects eg

   case FETCH_ORGANIZATION_OPPORTUNITIES:
        return state.merge({data: action.payload})

Or convert from Immutable data structures to mutable javascript object. eg

  stateObject = state.toJS()
  return {
      currentOpportunities: stateObject.organization.currentOpportunities,
      //...

Since it can lead to a bit of hassle tracking what the instance of an object in state, I suggest sticking with either Immutable data structures or mutable Javascript objects in your component state.

Here is mapStateToProps using Immutable Map API. ²

  return {
      currentOpportunities: state.getIn(['organization', 'currentOpportunities'])
      //...