Rendering von untergeordneten Komponenten verzögern, bis Saga in übergeordnetem Element ausgeführt wird. React-Komponente

Question

<Provider store={this.props.store}> 
    <ConnectedRouter history={this.props.history}> 
    <AppWrap> 
     <Header /> 
     <Main> 
     <Switch> 
      <Route exact path="/" component={Component1}/> 
      <Route path="/component2" component={Component2}/> 
     </Switch> 
     </Main> 
    </AppWrap> 
    </ConnectedRouter> 
</Provider> 

In App.ComponentWillMount wird die Redux-Aktion this.props.requestApplesApiData ausgelöst. Es wird von einer Saga behandelt, die einige Daten von einer API holt und mit einer anderen Aktion receiveApplesApiData mit einer Nutzlast zurückgibt, die durch den Reduzierer zu dem Reduktionszustand hinzugefügt wird.

componentWillMount(){ 
    // triggers an action 
    // which is picked up by a saga, 
    // which is handled by the reducer 
    // which updates the redux state 
    this.props.requestApplesApiData(); 
} 

Redux Zustand ist in Ordnung aktualisiert, wenn ich es in den Chrom Entwickler-Tools (w. Redux Erweiterung) untersuchen, aber ich bemerkte, dass der Redux-Zustand (mit den vor kurzem geholt „Äpfel“) nicht rechtzeitig aktualisiert wird in Component2, während die Wettlaufbedingung in Component 1 gewonnen wurde. Dies bedeutet, dass Component2 die "Äpfel" nicht anzeigen kann, weil sie zum Zeitpunkt der Renderfunktion nicht vorhanden waren.

Ein Re-Render würde normalerweise automatisch passieren, wenn es in einer verschachtelten baumartigen Struktur wäre, jedoch befinden sich "Äpfel" in ihrem eigenen Wurzelobjekt im Redux-Speicher.

Wie kann ich haben Component1 und Component2 warten auf App, um die notwendigen Daten zu holen. Oder anders ausgedrückt, wie kann ich die Renderfunktion in App verzögern/verzögern, bis die Daten reduktiv sind?

Answer 1

zwei Optionen:

• konditionell die Komponente machen basierend darauf, ob ein bestimmte Wert im Speicher vorhanden ist
• Anzeige etwas Vermittler, bevor der Wert in dem Redux Speicher aktualisiert wird

Bu Es klingt wie das Hauptproblem hier ist jedoch, dass die Komponente basierend auf einer Änderung im Laden zu aktualisieren.

Der allgemeine Pfad ist, dass Komponenten aktualisiert werden, wenn einer ihrer Requisiten aktualisiert wird. Sobald die Saga fertig ist, wird ein Wert im Redux-Speicher aktualisiert. Komponenten sollten etwas haben, das den Laden beobachtet und ihre Requisiten aus dem Laden aktualisiert. Dies wird React mitteilen, dass diese Komponenten erneut gerendert werden sollen. Die allgemeine Konvention besteht darin, alle diese Aktualisierungen in einer mapStateToProps-Funktion zu speichern.

Ihr Beispiel ist ziemlich abgespeckte, also bin ich nicht sicher, wie viel von der in redux Funktionalität gebaut Sie verwenden, aber hier sind die Dokumente, die beschreiben, wie aktualisiert Requisiten Ihre compnent weitergeben müssen: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

Zusammenfassung aus der Dokumentation: Verbinden Sie die Komponente mit dem Speicher connect(), und der erste Parameter muss eine Funktion sein, die angibt, wie die Komponente ihre Requisiten aus dem Speicher aktualisiert.