Serverseitiges Rendering für eine bestimmte Auswahl

Angenommen, meine App ist eine Liste mit vielen Elementen. Es gibt viele Gegenstände, deshalb möchte ich nicht alle Gegenstände in den Redux-Zustand aufnehmen.Serverseitiges Rendering für eine bestimmte Auswahl

Wenn ein Benutzer mich unter myapp.com/item/:itemId besucht, möchte ich das ausgewählte Element anzeigen. Momentan mache ich einen API-Aufruf in componentDidMount, um das Element abzurufen und die Antwort in myReduxState.selectedItem zu speichern. Dies zeigt jedoch den Benutzer und die nicht abgeschlossene Seite an, bis der API-Anruf beendet ist.

Gibt es eine Möglichkeit, dass ich das umgehen kann?

Quelle

2017-01-25 Daniel

Haben Sie über Server Rendering mit Redux gelesen? http://redux.js.org/docs/recipes/ServerRendering.html –

Sie müssen diese Daten holen, bevor Sie den HTML-Code kompilieren. Sie sollten auch etwas in den redux-Status aufnehmen, der angibt, ob Daten abgerufen werden müssen oder nicht. Auf diese Weise kann die Client-Seite dies überprüfen, bevor sie den Ajax-Aufruf in componentDidMount ausführt. – idbehold

Wenn Sie möchten, dass es serverseitig gerendert wird, müssen Sie den Abruf in componentWillMount verschieben, das sowohl auf dem Server als auch auf dem Client aufgerufen wird (componentDidMount wird nur auf dem Client aufgerufen). Sie müssen auch eine isomorphe/universelle Holbibliothek wie Isomorphic-Fetch oder Axios oder Superagenten verwenden. –

Ich löste dieses Problem, indem ich den Zustand auf der Serverseite erstelle. Ich erhalte die itemId von der URL auf meiner Express-Route und erhalte die Details des bestimmten Artikels. Ich benutze dies, um den Status zu erstellen und ihn an das Frontend zu übergeben.

Quelle

2017-02-07 22:22:20 Daniel

Das Muster, dem ich zu folgen versuche, ist ein Zustand von fetching, der im Redux-Zustand verfolgt wird. Sobald die API aufgelöst ist, vergewissere dich, dass der Zustand korrekt eingestellt ist und verwende dann in deinen Rendermethoden, um zu bestimmen, was du renderst.

render() { 
if (this.state.fetching) { 

    return <div> // put whatever you want here, maybe a loading component?</div> 

} 

return ( 
    // put the regular content you would put for when the api call finishes and have the data you need 
) 
}

Quelle

2017-01-25 20:54:55 finalfreq

Serverseitiges Rendering für eine bestimmte Auswahl

Antwort

Verwandte Themen