Reduxプロパティ 'payload'が未定義です

Question

Redux &を使用してAPIからデータをロードしています。データを正常にプルして状態に適用しても、エラーが発生します。

"Uncaught TypeError：プロパティ 'payload' undefinedを読み取れません。これは、コンソールのFETCH_PRODUCT_LISTINGS_PENDINGアクション・タイプの後に発生します。

リアクトコンポーネント：

import React from 'react'; 
import { connect } from 'react-redux'; 
import store from '../../../store'; 

import * as ProductListingActions from '../actions/ProductListingActions'; 

@connect((store) => { 
    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 <div></div>; 
    } 
} 

リデューサー：

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

アクション：

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

} 

すべてのヘルプはappreだろうケータイ

Answer 1

オブジェクトをディスパッチするのではなく、ディスパッチの呼び出しをディスパッチしています。

あなたは、このインライン場合：あなたのアクションの作成者は、派遣を呼び出すべきではありません

this.props.dispatch(
    store.dispatch({ 
    type: "FETCH_PRODUCT_LISTINGS", 
    payload: axios.get(Config.getConfigAPIUrl() + '/cartel/products') 
    }) 
) 

、それだけでアクションを返す必要があります：

export function fetchProductListings() { 
    return { 
    type: "FETCH_PRODUCT_LISTINGS", 
    payload: axios.get(Config.getConfigAPIUrl() + '/cartel/products') 
    } 
} 

をaxios.getが非同期である、しかし心に留めておいてくださいので、​​がお約束します。約束を履行するためにredux-thunkを追加することをお勧めします。

Answer 2

詳細情報を提供しない限り、情報の原因となるのはaction.payloadではありません。おそらくそれはaction.payLoadですか？ APIが実際に返すものを確認して、それが本当にaction.payloadであることを確認してください。