title: Redux Cannot read property 'payload' of undefined
body: <p>I'm loading data from an API using Redux &amp; React. Despite successfully pulling the data and applying it to the state, it's throwing an error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'payload' of undefined.</p>
  </blockquote>
  
  <p>This occurs after the <code>FETCH_PRODUCT_LISTINGS_PENDING</code> action type in the console.</p>
  
  <p><strong>React Component:</strong></p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import store from '../../../store';
  
  import * as ProductListingActions from '../actions/ProductListingActions';
  
  @connect((store) =&gt; {
      return {
          productListing: store.productListing.products
      }
  })
  
  export default class ProductListingContainer extends React.Component {
      constructor(data) {
          super();
          this.props = data;
          this.props.dispatch(ProductListingActions.fetchProductListings());
      }
      render() {
          return &lt;div&gt;&lt;/div&gt;;
      }
  }
  </code></pre>
  
  <p><strong>Reducer:</strong></p>
  
  <pre><code>import CookieHandler from '../../../modules/CookieHandler';
  const cookieHandler = new CookieHandler;
  
  export default function reducer(
      state = {
          products: [],
          fetching: false,
          fetched: false,
          error: null
      }, action) {
  
      switch(action.type) {
          case "FETCH_PRODUCT_LISTINGS_PENDING":
              return {
                  ...state,
                  fetching: true,
              }
              break;
          case "FETCH_PRODUCT_LISTINGS_REJECTED":
              return {
                  ...state,
                  fetching: false,
                  error: action.payload
              }
              break;
          case "FETCH_PRODUCT_LISTINGS_FULFILLED":
              return {
                  ...state,
                  fetching: false,
                  fetched: true,
                  products: action.payload.data.default
              }
              break;
      }
  
      return state;
  }
  </code></pre>
  
  <p><strong>Actions:</strong></p>
  
  <pre><code>import Config from '../../../Config.js';
  import store from '../../../store.js';
  import axios from 'axios';
  
  export function fetchProductListings() {
      store.dispatch({
          type: "FETCH_PRODUCT_LISTINGS",
          payload: axios.get(Config.getConfigAPIUrl() + '/cartel/products')
      })
  
  }
  </code></pre>
  
  <p>Any help would be appreciated</p>