Warten auf AJAX-Anforderung (React, Redux)

Question

Benötigen Sie Anzeigedaten, nachdem AJAX-Aufruf ausgeführt wird.

Meine Reducer:

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 

Meine Aktion Schöpfer:

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

Meine Komponente:

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

} 

Ich brauche weiter: Während Antwort nicht fertig, ich habe keine Notwendigkeit, Daten anzuzeigen . Bedingung, wenn jetzt nicht funktioniert

console.log beim ersten Mal undefined - denke, muss falsch sein, aber es nicht falsch. und das zweite Mal wird es wahr.

Answer 1

Sie benötigen keine Property 'isLoading' - behandeln Sie nur 2 Fälle, in denen Sie Ihre Daten haben und Sie nicht haben. Setzen Sie diese Bedingung in die render() - Funktion, da die Komponente nach dem Übergeben von Daten durch den Reduzierer aktualisiert wird. Syntax wird in Ihrem Fall in etwa so aussehen:

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