How to make components/app wait for ajax call - reactjs

Question

I'm trying to find the best way to have my application and components rely on a single ajax call that I'm making. My app gets authenticated through a 3rd party and to really show any meaningful information to the user I have to use the info from their sign on and then call another service to get details about them. I've drawn from a couple of examples and so far have this
//auth.js
module.exports = {
login(cb) {
if (this.user) {
if (cb) cb(true)
this.onChange(true)
return;
}
//if we don't have info about the user we call the other service here
request((res) => {
if (res) {
this.user = res
if (cb) cb(true)
this.onChange(true)
} else {
if (cb) cb(false)
this.onChange(false)
}
})
},
getUser() {
return this.user
},
logout(cb) {
delete this.user
if (cb) cb()
this.onChange(false)
},
loggedIn() {
return !!this.user
},
onChange() {}
}
then in my components I'm doing this all over the place which just doesn't seem like a great pattern.
import React from 'react';
import ReactDOM from 'react-dom';
import auth from './auth'
export class ProductList extends React.Component{
constructor(props) {
super(props);
//subscribe to on change event from the auth class
auth.onChange = this.updateAuth.bind(this)
this.state = {results: []};
}
componentWillMount() {
//call login. if already logged in this method just returns the current user
auth.login();
}
getProducts() {
if(this.state.loggedIn) {
$.get(config.server.url + "/api/User/" + auth.getUser().Id + "/Products", function(result) {
this.setState({
results: result.data.products
});
}.bind(this));
}
}
updateAuth(loggedIn) {
this.setState({
loggedIn: loggedIn
});
this.getProducts()
}
componentDidMount() {
this.getProducts()
}
render() {
return (
<table>
<tbody>
{this.state.results.map(function(result) {
return <ProductItem key={result.Id} data={result}/>;
})}
</tbody>
</table>
)
}
};
ReactDOM.render(
(<ProductList/>),
document.getElementById('react-forms')
);
So I basically just hook up an event handler in every single react component I have and check the same properties all over the place and it just seems fragile. I guess I'm looking for a way to tell me 'App' that I'm waiting for something to happen first before my components are valid.

Answer 1

I suggest you follow the structure outlined in the react tutorial (https://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server). The ajax call is made from the top-level component CommentBox using the jquery ajax function, and then passed down to other components CommentList and CommentForm via props. The code below is taken directly from the tutorial. The syntax is slightly different since you are using es6, but the concepts remain the same.
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});