React / Redux не может прочитать свойство "currentOpportunities" из неопределенного

Question

У меня проблемы с моей функцией Redux mapStateToProps, которая выдает ошибку, говорящую о том, что state.currentOpportunities не определен.Странная вещь в этом заключается в том, что начальное состояние, которое определено в organizationReducer, может быть достигнуто только с помощью state._root.entries 1 .organization.currentOpportunity, а не state.organization.currentOpportunity, когда я console.logСостояние console.log в основном файле index.js

Console.log (States)

Основной файл App.js

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

Мой корневой файл редуктора

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

Кто-нибудь знает, что здесь может происходить?

Answer 1

state.organization.currentOpportunity не определено, потому что состояние является неизменной картой, и вы пытаетесь получить доступ к ее полю, как к объекту. ¹

Вы должны обновить свою логику редуктора, чтобы использовать неизменяемый API для объединения объектов например,

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

Или преобразовать из неизменяемых структур данных в изменяемый объект JavaScript.Например,

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

Поскольку это может немного затруднить отслеживание экземпляра объекта в состоянии, я предлагаю придерживаться либо неизменных структур данных, либо изменяемых объектов Javascript в состоянии вашего компонента.

Здесь mapStateToProps использует API неизменяемой карты. ²

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