시작 루트 성공

Question

내가 (등 번역/초기 설정과 같은) 일부 데이터를 가져 오기 할

를 가져올 서버 뒤 렌더링 반응하고 그 후 응용 프로그램

을 시작 어떻게해야 할 최선의 방법인가?

이제 스피너를 렌더링하고 가져 오기 성공 후 React Root를 다시 렌더링합니다. 하지만 정말 좋은 방법인지 모르겠습니다.

도움 주셔서 감사합니다.

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

을 그리고 구성 요소 내에서 당신은 조건부 스피너를 보여 this.state.dataLoading를 사용할 수 있습니다

//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

나는 RHTLContainer 구성 요소 생성자와 상태에 가져온 데이터를 저장하는 성공을 가져 오기에 데이터를 가져 오는 게 좋을 것.