Redux 정의되지 않은 'payload'속성을 읽을 수 없습니다.

Redux &을 사용하여 API에서 데이터를로드합니다. 데이터를 성공적으로 가져 와서 상태에 적용 했음에도 불구하고 오류가 발생합니다.Redux 정의되지 않은 'payload'속성을 읽을 수 없습니다.

"Uncaught TypeError : 'payload'of undefined"속성을 읽을 수 없습니다. 이는 콘솔에서 FETCH_PRODUCT_LISTINGS_PENDING 활동 유형 다음에 발생합니다.

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 다음과 같습니다

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

작업

는 구성 요소 반응 ciated

출처

2017-01-21 DorianHuxley

개체를 디스패치하는 대신 디스패치 호출을 전달하는 중입니다. 이 인라인 경우

당신의 행동 작성자 파견을 호출해서는 안

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는 비동기 , 그래서 payload이 될 것입니다. 약속 이행을 처리하기 위해 redux-thunk을 추가하는 것이 좋습니다.

출처

2017-01-21 21:08:31 azium

완벽하고 매력적인 작품! 고마워요 – DorianHuxley

참고 - 나는 이미 redux - 썽크를 사용하고 있지만, 팁 주셔서 감사합니다 :) – DorianHuxley

정보를 제공하지 않는 유일한 정보는 action.payload이 정의되지 않은 것입니다. 아마도 그것은 action.payLoad입니까? API가 실제로 반환하는지 확인하여 실제로는 action.payload인지 확인하십시오.

출처

2017-01-21 21:02:49 Christopher

Redux 정의되지 않은 'payload'속성을 읽을 수 없습니다.

답변

관련 문제