startet Reagieren root macht nach Server holt Erfolg

Question

ich einige Daten abrufen möchte (wie Übersetzungen/Grundeinstellungen usw.) und danach eine Anwendung starten

Wie soll ich tun, dass in der besten Art und Weise?

Jetzt Rendere ich ein Spinner und nach dem Fetch-Erfolg r render Root react. Aber ich bin mir nicht sicher, ob das wirklich gut ist.

Danke für jede Hilfe!

//launch fetch and wait for the response. After that re -render Root 
bootPreparationInit() 
    .then(() => { 
     render(
      <RHTLContainer> 
       <MuiThemeProvider> 
         <RootContainer store={store} history={history} /> 
       </MuiThemeProvider> 
      </RHTLContainer>, 
      document.getElementById("root") 
     ); 
    }); 

// it for tests. Because Karma sometimes can't see the root element 
(() => { 
    if (!document.getElementById("root")) { 
     const rootEl = document.createElement("div"); 
     rootEl.setAttribute("id", "root"); 
     document.body.appendChild(rootEl); 
    } 
})(); 

// render a spinner before data load 
render(
    <RHTLContainer> 
     <MuiThemeProvider> 

       <div className="spinner-ico-box"> 
        <CircularProgress /> 
       </div> 

     </MuiThemeProvider> 
    </RHTLContainer>, 
    document.getElementById("root") 
); 

// it for webpack HMR 
if (module.hot) { 
    module.hot.accept("./core/containers/Root.container",() => { 
     const NewRootContainer = require("./core/containers/Root.container").default; 

     render(
      <RHTLContainer> 
       <NewRootContainer store={store} history={history} /> 
      </RHTLContainer>, 
      document.getElementById("root") 
     ); 
    }); 
} 

Answer 1

Ich würde vorschlagen, dass Daten in RHTLContainer Komponente Konstruktor und auf Abruf Erfolg Speicher abgerufenen Daten in dem Zustand zu holen:

constructor() { 
    ... 
    this.state = { 
     dataLoading: true; 
    }; 
    bootPreparationInit() 
     .then((responseData) => { 
      ... 
      this.setState({ 
       dataLoading: false, 
       fetchedData: respondeData 
      }); 
     }); 
} 

Und dann innerhalb Ihrer Komponente können Sie this.state.dataLoading bedingt Spinner zeigen verwenden.