Richtiger Weg zum Abrufen von Daten - Reagieren

Question

Ich habe Benutzer und Orte als zwei verschiedene Datenbanken, wo jeder Benutzer hat Orte.

Ich habe BasicInfo Komponente wo zu einer Zeit 1 Ort des Benutzers geladen werden muss.

ComponentWillMount von BasicInfo

componentWillMount() { 
    this.props.dispatch(fetchUser())   
    this.props.dispatch(fetchPlaces(1)) 
} 

Ich brauche in fetchPlaces Benutzer-ID zu übergeben, wie der jetzt bin ich hartzucodieren, aber wie mache ich mit den Ergebnissen der fetchUser? Sollte ich in componentWillReceiveProps(nextProps) tun? Oder gibt es einen anderen Weg?

componenetWillReceiveProps macht Sinn, aber ich frage mich, was ist, wenn es eine Kette von Ereignissen ist? Kann abhängig von der Orts-ID sein, wenn ich andere Daten holen muss.

Aktionen:

export function fetchPlaces(user_id) { 
 
    return function(dispatch) { 
 
    axios.get("/getPlaces?user_id=" + user_id) 
 
     .then((response) => { 
 
      console.log(response); 
 
     dispatch({type: "FETCH_PLACES_FULFILLED", payload: response.data}) 
 
     }) 
 
     .catch((err) => { 
 
     dispatch({type: "FETCH_PLACES_REJECTED", payload: err}) 
 
     }) 
 
    } 
 
} 
 

 
export function fetchPlace(place_id) { 
 
    return function(dispatch) { 
 
    axios.get("/getPlace?place_id=" + place_id) 
 
     .then((response) => { 
 
      console.log(response); 
 
     dispatch({type: "FETCH_PLACES_FULFILLED", payload: response.data}) 
 
     }) 
 
     .catch((err) => { 
 
     dispatch({type: "FETCH_PLACES_REJECTED", payload: err}) 
 
     }) 
 
    } 
 
}

Answer 1

Sieht so aus, als ob Sie bereits redux-thunk verwenden? Wenn ja, können Sie das Versprechen von Ihrem axios.get zurückkehren() ruft:

return axios.get(...); 

... dann kann man so etwas tun (ich nehme an, was Ihr fetchUser und user aussehen könnte):

this.props.dispatch(fetchUser()).then(user => this.props.dispatch(fetchPlaces(user.id))) 

Answer 2

Sie einen Thunk oder ein Versprechen Middleware nutzen können. Sie können die Motivation und Beispiele in der documentation finden.