Q:

React/Redux props property of store is undefined

In my app I'm using:
"devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^4.0.0",
    "browser-sync": "^2.24.5",
    "browser-sync-webpack-plugin": "^2.2.2",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "popper.js": "^1.12",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "uuid": "^3.3.2"
},

On the redux side I have this setup:
store.js:
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];

const store = createStore(rootReducer, initialState, applyMiddleware(...middleware));

export default store;

rootReducer is:
import {combineReducers} from 'redux';

import menuReducer from './menuReducer';

const rootReducer = combineReducers({
  menu: menuReducer
});

export default rootReducer;

Which has only menuReducer in its disposal:
import * as types from '../actions/types';

const initialState = {
  data: {}
}

export default function(state = initialState, action) {
  switch (action.type) {
    case types.GET_MENU:
      return {
        ...state,
        data: action.payload
      }
    default:
      return state;
  }
}

Which gets it's feed from a single menu action:
import * as types from './types';

export const getMenu = () => (dispatch) => {
  fetch('/admin/json/menu.json')
  .then(res => res.json())
  .then(data => dispatch({
      type: types.GET_MENU,
      payload: data
    })
  )
}

And finally the on the components side I have:
App.js:
import React from 'react';
import {Provider} from 'react-redux';
import {BrowserRouter} from 'react-router-dom';

import store from '../store';
import SideMenu from './sidemenu';
import Content from './content';

class App extends React.Component {
  render() {
    return(
      <Provider store={store}>
        <BrowserRouter basename='/yonetim'>
          <div className="h-100">
            <SideMenu className="h-100"/>
            <Content className="h-100"/>
          </div>
        </BrowserRouter>
      </Provider>
    );
  };
};

export default App;

And the component which tries to consume this basic redux implementation:
import React, {Fragment} from 'react';
import {v1 as uuid} from 'uuid';
import {connect} from 'react-redux';

import {getMenu} from '../actions/menuActions';
import MenuDropdown from './parts/menu-dropdown';
import MenuItem from './parts/menu-item';

class SideMenu extends React.Component {
  componentWillMount() {
    this.props.getMenu();
  }
  render() {
    console.log(this.props.menuData);
    return(
      <header>
        <div className="cnt-menu-head">
          <h6>{this.props.menuData.heading}</h6>
        </div>
        <div className="cnt-menu">
          <ul className="nav nav-pills flex-column">
            {this.props.menuData.sections.map((section, i) => {
              if (section.type === 'link') {
                let key = uuid();
                return <MenuItem key={key} exact={section.exact} linkTo={section.linkTo} linkText={section.linkText}/>
              } else if (section.type === 'dropdown') {
                let keyedLinks = section.links.map((link) => {
                  link.key = uuid();
                  return link;
                });
                return (
                  <Fragment key={uuid()}>
                    <div className="horizontal-separator"></div>
                    <MenuDropdown linkText={section.linkText} links={keyedLinks}/>
                  </Fragment>
                )
              }
            })}
          </ul>
        </div>
      </header>
    );
  };
};

function mapStateToProps(state) {
  return {
    menuData: state.menu.data
  }
}

export default connect(mapStateToProps, {getMenu})(SideMenu);

What happens is:
I get the error:

Uncaught TypeError: Cannot read property 'map' of undefined

refering to this.props.menuData.sections.map() part of my code. Now the funny thing is:

The render function of this component gets called twice
When I put console.log() in both the action and reducer I see they get called twice as well.
When I comment out the codes that try to use this.props.menuData in render() then console.log(this.props.menuData); at the beginning of render function prints empty in the first run of render() and then gets filled with the actual data I'm trying to use with the second run. I have absolutely no idea what's going on with this code or what may be the underlying cause. Any help is much appreciated. Thanks.

A:

The problem here is that you're calling an "async" action (fetch) which dispatch the data after fetching. 
So your component loads but then when your function (getMenu) dispatch the action down to Redux, your component run for the second time. 
I may suggest to do a ternary which conditions the render of the consumer of menuData and show a loader: 
Inside your render: 
return this.props.menuData.sections ? (actualCodeGoesHere) : <Loader />

