Flux and React: Wie zeige ich einen Lade-Indikator an, wenn die Anfragen von meiner App gemacht werden? Das Gute, das Schlechte und das Hässliche versuchen

Question

Ich versuche herauszufinden, die beste Möglichkeit, die Ladeanzeige zu verstecken/zeigen, wenn ich eine Anfrage mache.

Ich habe ein:

• LoadingAction ein Ereignis Emmit die Ladeanzeige zu ein-/auszublenden.
• LoadingStore, um die Ladeinformationen zu speichern (anzeigen/verbergen).
• loading.jsx: die Ladeanzeigekomponente.

Ich habe versucht, verschiedene Dinge, die in der "flux Art und Weise" zu tun:

• gut: ein LoadingAction.showLoading() vor dem Antrag anrufen und LoadingAction.hideLoading(), wenn die Antwort eintrifft.
• : rufen Sie eine LoadingAction.showLoading() in jeder Ansicht, die eine Aktion (die eine Anforderung) und LoadingAction.hideLoading() aufrufen, wenn mein Rückruf aus dem Speicher aufgerufen wird.
• hässlich: Ich habe versucht, die LoadingStore direkt mit einer setter Methode (was ist nicht die richtige Lösung ...), wenn ich die Anfrage und die Antwort erhalten.

Aber, bis auf den letzten Versuch (die "hässlichen"), erhalte ich immer den Fehler dispatch in the middle of a dispatch.

Ich bin mir bewusst, was das bedeutet, aber ich kann nicht in einer anderen Strategie denken.

Ich möchte nicht setTimeout Funktion verwenden, um dieses Problem zu beheben. Dies ist nicht die richtige Lösung.

Danke!

Answer 1

Nach einiger Zeit enden wir mit der beschriebenen Lösung here. Der Ansatz war ganz anders als meine ursprüngliche Idee: Jede Komponente nehmen kümmert sich um die Belastung, wie folgt aus:

render: function(){ 
    // while loading 
    if (!this.state.data){ 
    return <Loader/> 
    } 

    // loaded, you can use this.state.data here 
    return <div>...</div> 
} 

Aber wir haben Probleme, wenn eine API einen Fehler zurück. Wie kann die Komponente in diesem Fall die <Loader /> entfernen?

Nun, jede Komponente mit registrieren müssen und hören (wir Flux verwenden) der Versand von unserem Versprechen basiert HTTP-Client (Axios). Wie folgt aus:

 componentDidMount: function(){ 
      LoaderStore.addChangeListenerEsconderLoading(this.stopLoading); 
     }, 

     componentWillUnmount:function(){ 
      LoaderStore.removeChangeListenerEsconderLoading(this.stopLoading); 
     }, 

Und dies (mit Axios):

request(options) 
    .then(function(response){ 
    success && success(response.data); 
    }) 
    .catch(function (error) { 
    LoaderAction.hideLoading(); 
    }