React Router warte auf Lösung

Question

Ich komme aus Angular und benutze die Auflösungsfähigkeiten des UI-Routers, was es einfach macht, zu warten und den Controllern Ergebnisse zu injizieren.

Derzeit möchte ich dies mit reagieren reagieren, ohne die Anforderung (oder triggern Aktionen) innerhalb der componentWillMount Methode zu schreiben, wenn Sie React Router verwenden. Ich denke, es gibt einen besseren Weg, es zu tun, ich habe einfach nicht herausgefunden, was.

Würde gerne einen Rat bekommen oder zeigen Sie mich, wo ich lernen kann zu tun, so

Answer 1

Ihre beste Wette ist den Rückruf in Router.run (http://rackt.github.io/react-router/#Router.run) zu verwenden. Der Rückruf Sie, dass passieren wird, wenn die URL Änderungen genannt, und es ist verantwortlich für den Wieder Rendering, wie in diesem Beispiel von der Seite genommen:

Router.run(routes, function (Root) { 
    // whenever the url changes, this callback is called again 
    React.render(<Root/>, document.body); 
}); 

In dieser Funktion können Sie alle Asynchron-Operationen benötigen Sie vor dem Aufruf React.render(), wie folgt aus:

Router.run(routes, function (Root) { 
    // whenever the url changes, this callback is called again 
    asyncStuff().then(function (data) { 
    React.render(<Root data={data} />, document.body); 
    }); 
}); 

Das Problem bei diesem Ansatz ist, dass die Benutzeroberfläche überhaupt nicht, bis die Daten verfügbar reagieren ist. Stattdessen würde ich empfehlen, Ihre Komponente mit einem leeren Zustand zu rendern und die Daten in componentDidMount abzurufen und dann neu zu rendern, wenn die Daten eintreffen. Oder noch besser, trennen Sie das Datenholen und das Rendern in zwei Komponenten. Eine Komponente ruft die Daten ab und übergibt diese als Eigenschaft an die Renderkomponente. Das Abrufen von Daten-Komponente kann auch vermeiden, die andere Komponente zu machen, es sei denn die Daten gibt, so etwas wie:

render: function() { 
    if (this.state.data) { 
    return <TheComponent data={this.state.data} />; 
    } else { 
    return <Spinner />; 
    } 
} 

Dies ist ein gemeinsames Muster in Reaktion, Komponenten zu trennen, die mit Daten zu holen und Staat beschäftigt, und Komponenten, die machen dieser Staat. Sie möchten die statusbehafteten Komponenten so weit wie möglich in die Hierarchie schieben, da sie eine logische Grenze bilden. Die stateful Komponenten sind wo 90% der Bugs auftreten, und es ist schön, sich auf diejenigen konzentrieren zu können, wenn Sie Bugs suchen.

Ein weiteres Problem mit Warten ist, dass der Benutzer schnell navigieren kann, was bedeutet, dass der Callback Router.run erneut aufgerufen wird, bevor die ersten Daten eintrafen. Sie müssen also sicherstellen, dass Sie den letzten Vorgang abbrechen und überhaupt nicht rendern.