Redux setzen Anfangszustand als API-Antwort

Question

Ich erstelle eine Website, um einige Telefone anzuzeigen, und habe eine API eingerichtet, um die neuesten Telefone aus meiner Datenbank zurück zu geben. In meiner Komponente innerhalb der KomponenteWillMount gebe ich eine Aktion aus, die dann die API-Ergebnisse abruft und meinen Speicher auffüllt. Die Komponente rendert dann, was im Geschäft ist.

Dies scheint alles in Ordnung zu sein, aber es bedeutet, dass es etwas Zeit gibt, wenn nichts angezeigt wird, während der API-Aufruf erfolgt.

Ich frage mich, ob es eine Möglichkeit gibt, entweder die Aktion auf dem Server zu versenden und die initialState als API-Antwort oder eine andere Möglichkeit, die API-Antwort vom Server an den Client zu übergeben, so dass die Daten sind da schon wenn die Komponente rendert?

Das ist, was ich bisher haben ...

Reducers

export function latestPhonesHasErrored(state = false, action) { 
    switch (action.type) { 
     case 'LATEST_PHONES_HAS_ERRORED': 
      return action.latestPhonesHasErrored; 
     default: 
      return state; 
    } 
} 

export function latestPhonesIsLoading(state = false, action) { 
    switch (action.type) { 
     case 'LATEST_PHONES_IS_LOADING': 
      return action.latestPhonesIsLoading; 
     default: 
      return state; 
    } 
} 

export function latestPhones(state = [], action) { 
    switch (action.type) { 
     case 'LATEST_PHONES_FETCH_DATA_SUCCESS': 
      return action.latestPhones; 
     default: 
      return state; 
    } 
} 

Aktion

export function latestPhonesFetchData() { 
    return (dispatch) => { 
     dispatch(latestPhonesIsLoading(true)); 

     fetch('/api/latest-phones/') 
      .then((response) => { 
       if (!response.ok) { 
        throw Error(response.statusText); 
       } 

       dispatch(latestPhonesIsLoading(false)); 

       return response; 
      }) 
      .then((response) => response.json()) 
      .then((results) => 
dispatch(latestPhonesFetchDataSuccess(results))) 
      .catch(() => dispatch(latestPhonesHasErrored(true))) 
    } 
} 

Server.js

Komponente

import {latestPhonesFetchData} from '../../../actions/results-actions'; 

const mapStateToProps = (state) => { 
    return { 
     latestPhones: state.latestPhones 
    } 
}; 

class Home extends Component { 
    componentWillMount(){ 
     this.props.latestPhonesFetchData(); 
    } 

    render(){ 
     /* all component render here*/ 
    } 
} 
export default connect(mapStateToProps, {latestPhonesFetchData})(Home); 

Jede Hilfe ist sehr zu schätzen!

Answer 1

Wenn Sie auf dem Client Reagieren (was Sie sind), gibt es keine Möglichkeit, die Daten vorzuladen, bevor die Komponente gerendert wird. @ A.Laus Kommentar oben ist korrekt ... Ihre beste Option ist es, ein Lade-Spinner oder ähnliches zu rendern, während die Daten abgerufen werden.

Alternativ können Sie das serverseitige Rendern verwenden. Dies bedeutet, dass React im Voraus aktualisiert wird und eine HTML-Datei für den Client bereitgestellt wird. Durch Rendern auf dem Server können Sie einfach die benötigten Daten aus Ihrer Datenbank abrufen und diese vor dem Rendern als Requisiten an die Komponente übergeben. Kein AJAX erforderlich, und Sie müssen dem Client nie eine Ladeansicht anzeigen.