Warte auf Redux-Aktion, um eine zweite zu senden

Question

Hallo und danke im Voraus für das Lesen meiner Frage.

Ich arbeite an einer React App (Version 16) mit Router v3 und Redux.

Die App hat eine ähnliche Struktur wie folgt aus:

<Route path="/" component={BakeryComponent}> 
    <IndexRoute component={LandingComponent}/> 
    <Route path="employees" component={EmployeesComponent}/> 
    <Route path="clients" component={ClientComponent}/> 
</Route> 

So haben wir wie verschiedene Einheiten. Bäckerei, die die wichtigste ist, Mitarbeiter, die auf die ausgewählte Bäckerei und Kunden angewiesen ist, die auch von der Bäckerei abhängt.

Wenn wir auf die App zugreifen, landen wir auf der Landing-Page, die allgemeine Informationen der Bäckerei zeigt (es ist eine standardmäßig ausgewählt) wie Name, Mitarbeiter Menge und einige andere. Alle diese Informationen stammen aus dem Backend, sie werden im componentDidMount der Bakery- oder Landing-Komponente abgerufen (an dieser Stelle macht es keinen Unterschied).

Wenn der Benutzer auf der Zielseite ist, kann er zu den Ansichten von Mitarbeitern oder Kunden navigieren. Wenn dies geschieht, wird die Komponente gemountet, angenommen, es handelt sich um eine Mitarbeiterkomponente, und in der componentDidMount-Methode der Komponente rufen wir die benötigten Informationen ab (in diesem Fall die Mitarbeiterliste).

Alles funktioniert gut bis jetzt.

Jetzt, wenn der Benutzer die Seite aktualisiert, sollte alles noch funktionieren (es ist eine Voraussetzung), aber es tut es nicht. Das Problem besteht darin, dass BakeryComponent und EmployeeComponent (beide) dann erneut bereitgestellt werden, sodass neue Back-End-Aufrufe ausgelöst werden (parallel). Aber der Back-End-Aufruf an die Mitarbeiter hängt davon ab, dass die Bäckerei zuerst aufgelöst wird, weil wir die Mitarbeiter wissen müssen, welche Bäckerei wir haben wollen, so dass wir an dieser Stelle einen Fehler bekommen.

Ich habe versucht, die aufgerufene Aktion (die zum Abrufen der Mitarbeiter) zu überprüfen, wenn die Bäckerei bereits aufgelöst wurde (mit getState) und wenn nicht, warten Sie, bis es gelöst wurde. Aber es überzeugt mich nicht, es sieht irgendwie wie ein Hack aus. Ich habe das Gefühl, dass React/Redux bereits die Tools haben sollte, um das zu lösen, aber ich kenne sie einfach nicht. Habe ich recht?

Jede Hilfe wird sehr hilfreich sein.

Danke!

Answer 1

Ich kann einen Weg für Sie denken, obwohl es eigentlich keine coole Lösung ist. Sie können überprüfen, ob die Daten in der BakeryComponent bereit sind oder nicht, bevor Sie den Versand in der LandingComponent aufrufen. Etwas wie folgt aus:

BakeryComponent

componentDidMount() { 
    // after this one finish we may have something in the store like: state.bakery.loaded = true 
    dispatch(loadBakery()) 
} 

LandingComponent

// Landing component should connect to state.bakery.loaded to get updated data 
componentDidMount() { 
    initData() 
} 

componentDidUpdate(){ 
    initData() 
} 

initData() { 
    // check if bakery loaded and landing data is not loaded 
    if (state.bakery.loaded && !state.landing.loaded) { 
    // this should load data and set the state.landing.loaded to true 
    dispatch(loadLanding()) 
    } 
}