Stop React JS / Flux application loading until one API request is done?

Question

I'm using React JS with Alt (Flux) library.

At the very beginning I need to fetch user data from the REST API. When this request is not successful I don't want to render the whole application and display some error. If data are fetched successfully, rendering should continue. Fo fetching data I use Axios library.

How to achieve this fetch data test?

Answer 1

Here's a solution that makes the call up front then renders your app only if the call was successful.

axios.get('url')
  .then(function (response) {
    // success, let's render the app
    // you can pass the whole response object or just the data to your app
    ReactDOM.render(
        <MyApp reesponse={response}/>,
        document.getElementById('app')
    );
  })
  .catch(function (response) {
    // something went wrong
  });