AJAX 요청 대기 (React, Redux)

Question

AJAX 호출이 완료되면 데이터를 표시해야합니다.

내 감속기 :

import { INCOME_PROFILE } from '../actionTypes' 
import Immutable from 'immutable' 

const initialUserState = []; 
const profileReducer = function(state = initialUserState, action) { 
    //console.log('actiondata in reducer:' + action.data + action.type); 

    switch(action.type) { 

    case 'INCOME_PROFILE_IS_LOADING': 
    return Object.assign({}, state, { hh: action.hasFetched }); 

    case 'INCOME_PROFILE': 
     return Object.assign({}, state, { course_list: action.data, hh: action.hasFetched }); 

    default: 

    return state; 
    } 
} 
export default profileReducer 

내 행동 작성자 :

export function GET_ITEM_REQUEST() { 
    return { 
    type: INCOME_PROFILE_IS_LOADING, 
    hasFetched: false, 
    } 
} 



function receiveData(json) { 
    return{ 

     type: INCOME_PROFILE, 
     data: json, 
     hasFetched: true 
    } 
}; 

export function IncomeProfileList() { 

    return dispatch => { 

     return (

      axios.post(Api.getURI("profile"),{}, { 
     headers: { 'X-Authenticated-Userid': '15000500000@1' } 
    }).then(function (response) { 


       //console.log(response.data); 
       dispatch(receiveData(response.data.body)); 

      }) 
     .catch((error) => { 
       console.log(error); 
      }) 
      ) 
    } 
} 

내 구성 요소 :

class IncomeProfile extends Component { 
    constructor(props) { 
    super(props) 
    } 

    componentDidMount() { 
    this.props.IncomeListProfile(); 
     } 

render() { 
console.log(this.props.isloading); 

if (this.props.isloading) { 
      return <p>Sorry! There was an error loading the items</p>; 
     } 
} 
} 
const mapDispatchToProps = function(dispatch) { 
    return { 
     IncomeListProfile:() => dispatch(IncomeProfileList()) 
     } 
    } 

const mapStateToProps = function(state) { 
    //var mystore = state.toJS() 
    var mystore = state.getIn(['incomeProfileList'])['course_list']; 
    var mystored = state.getIn(['incomeProfileList']); 
    console.log(mystored.hh); 
    var copy = Object.assign({}, mystore); 
    return { 
    items: copy.course_list, 
    isloading: mystored.hh 
     }; 

} 

나는 다음 필요가 없습니다 : 응답이 완료되지 동안, 나는 데이터를 표시 할 필요가 . 현재 작동하지 않는 경우의 조건

console.log undefined - 처음에는 false가 아니지만 false가 아닌 것으로 간주됩니다. 두 번째로는 사실이되고 있습니다.

Answer 1

'isLoading'속성이 필요하지 않습니다. 데이터가 있고 가지고 있지 않은 2 가지 사례 만 처리하면됩니다. 리덕터를 통해 데이터를 전달한 후 구성 요소가 새로 고침 될 것이므로이 조건을 render() 함수에 넣습니다. 구문은 다음과 같습니다.

render() { 
    if(!this.props.items) { 
     return <div>Loading...</div>; 
    } else { 
     return (
     <div>Display your data!</div> 
    ); 
    } 
    }