Q:

React Redux: Cannot read property '0' of undefined

I keep running into this error when trying to access data within my props.
I'm mapping state to props using the @connect decorator like so: 
@connect((store) => {
    return {
        listAdProductsData: store.listAdProductsData.data,
        foxFooterData: store.foxFooterData.data
    }

})

However, when I log this.props I get three instances of props. Two of them being unpopulated on load and the third finally being populated with the data. 
How can I get around this? The only way I've found so far is to do a "silly" check to see if the data is an empty array of objects like so:
getData(prop) {
        if (prop.data === undefined) {
            return [{}];
        }

        return prop.data;
    }

I also have a dispatch function within componentWillMount to fetch the data - is there any issue doing it like this? : 
componentWillMount() {
        //Fetch Ad Products Data
        this.props.dispatch(fetchAdProductsData())

        //Fetch List Ad Products Data
        this.props.dispatch(fetchListAdProductData())

        //Fetch Fox Footer Data
        this.props.dispatch(fetchFoxFooterData());

    }

PROPS Log: 

Error message:

JSON Data: 

Here is my component code: 
import React from 'react';

import HeroVideo from '../../../assets/videos/HERO_Landing.mp4';

import styles from './styles.css';

export default class HeroModule extends React.Component {
    render() {
        let data = this.props.data[0];
        console.log("PROPS", data);
        console.log("Get data", data.productData[0].adProductsHeading);
        return (
            <div className="hero-wrap col-xs-12 no-padding">
                <div className="video-container">
                    <video width="100%" height="auto" autoPlay loop muted className="fillWidth">
                        <source src={HeroVideo} type='video/webm' />
                        <source src={HeroVideo} type='video/mp4' />
                        Your browser does not support HTML5 video. Please upgrade your browser!
                    </video>
                </div>
                <div className="hero">
                    <div className="hero-header-wrap">
                        <div className="hero-header">
                            <h1></h1>
                            <h2>The big picture?</h2>
                            <button className="btn">Watch Video</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

A:

I'd remove the "silly" check from getData() and add this line in the beginning of render()
if (!this.props.data ) { // or !this.props.data.length if your have an empty array initially
    return null; // or some loading indicator 
}

This way you make sure the remaining of your render() code will only be executed when data is populated successfully.
It's always a good practice to to have an initialState in your store. This will replace the need for your "silly" check and instead populate the store with initial data that have an empty array for example.

