Erste Seite Daten mit ReactJS + Redux + Cloud Endpunkte

Question

holen Ich benutze ReactJS + Redux + Google Cloud Endpunkte. Jetzt muss ich beim ersten Laden der Seite Daten über Cloud Enpoints abrufen und anzeigen. Wie würde das erreicht werden? Volle Codebeispiele geschätzt!

Answer 1

Sie mounten Ihre App grundsätzlich mit einem leeren Blatt, sei es mit Overlays oder Lade-Spinner, und holen Sie dann Daten innerhalb componentDidMount(). Von the React docs.

laden Ausgangsdaten über AJAX

Daten holen in componentDidMount. Wenn die Antwort eintrifft, speichern Sie die Daten im Status und lösen ein Rendering aus, um Ihre Benutzeroberfläche zu aktualisieren.

Wenn Sie Daten asynchron abrufen, können Sie mit componentWillUnmount alle ausstehenden Anforderungen abbrechen, bevor die Komponente abgehängt wird.

Dieses Beispiel holt die gewünschte Github Benutzers neuesten Kern:

var UserGist = React.createClass({ 
    getInitialState: function() { 
    return { 
     username: '', 
     lastGistUrl: '' 
    }; 
    }, 

    componentDidMount: function() { 
    this.serverRequest = $.get(this.props.source, function (result) { 
     var lastGist = result[0]; 
     this.setState({ 
     username: lastGist.owner.login, 
     lastGistUrl: lastGist.html_url 
     }); 
    }.bind(this)); 
    }, 

    componentWillUnmount: function() { 
    this.serverRequest.abort(); 
    }, 

    render: function() { 
    return (
     <div> 
     {this.state.username}'s last gist is 
     <a href={this.state.lastGistUrl}>here</a>. 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <UserGist source="https://api.github.com/users/octocat/gists" />, 
    mountNode 
);