Wann und wo sollten Komponenten ihre Daten vom Server beziehen?

Question

(Dies ist vielleicht kein redux Frage per sé)

Meine aktuelle Strategie/thoughtprocess ist dies: jeder Container-Komponente, die Daten benötigt wird, löst eine Aktion, die die Daten in componentDidMount holt (die dann eine api Anfrage auslöst, dass löst eine Aktion aus, die den Speicher aktualisiert)

Das Problem damit: Einige Komponenten rufen genau die gleichen Daten ab. Das bedeutet auch, dass wenn ich meine App lade, eine (manchmal "große") Anzahl von unnötigen Anfragen und Wiederholungen passiert.

Meine Frage: Was ist ein besserer Weg, dies zu behandeln?

Persönlich sehe ich zwei Möglichkeiten:

• irgendwie die Daten vom Server zurück zwischenzuspeichern, und wenn eine neue Anforderung ausgelöst, die Daten zwischengespeichert (und geschieht in einem gewissen Timeout) hat, Rückkehr, die im Cache gespeicherten Daten statt eine neue Anfrage machen.
• Holen Sie alle meine App-Daten woanders an einem Ort. (Der Nachteil ich sehe, ist, dass meine Container Komponenten sind keine „autarke“ dann)

Meine Vermutung ist, dass es einige bessere Weise, die ich nicht sehen kann scheinen zu :)

Answer 1

zu Verbesserung der Anfangs machen, würde ich:

• holen die Daten auf dem Server und bevölkern redux Speicher
• Server-Rendering tun und die redux Speicher Zustand Client
• fügen Sie einen Scheck an Ihrepassieren, um zu sehen, ob die Daten

So etwas wie

componentDidMount() { 
    if (this.props.shouldFetchData) { 
    this.props.fetchData() 
    } 
} 

zur Verfügung Wir haben ein System wie diese an Ort und Stelle und es funktioniert gut. Der einzige Nachteil ist, dass Sie den API-Aufruf an zwei verschiedenen Stellen (Client und Server) durchführen müssen, aber ich habe noch keine Lösung mit serverseitigem Rendering gesehen, die diese Duplizierung nicht hat.

Answer 2

Ich verwende gerne redux-thunk für diese Art von Sache, wie Sie Zugang zum Staat erhalten und Entscheidungen entsprechend treffen können. z.B.

const fetchData = (id) => { 
    return (dispatch, getState) => { 
     if (getState().path.to.data.isLoading) 
      return 

     dispatch({type: 'LOADING_DATA'}) 

     fetch(`${url}/${id}`).then(data => dispatch({type: 'SET_DATA', data})) 
    } 
} 

Dann in Ihrem Minderer, setzen Sie isLoading wahr, wenn die 'LOADING_DATA' Aktion ausgelöst wird, und dann Toggle es zurück zu false wenn die 'SET_DATA' empfangen wird. z.B.

const initialState = {isLoading: false} 

const reducer = (state = initialState, action) => { 
    switch(action.type) { 
     case 'LOADING_DATA': 
      return { ...state, isLoading: true } 
     case 'SET_DATA': 
      return { ...state, ...data, isLoading: false } 
    } 
} 

Alle Komponenten für die gleichen Daten im Speicher sucht, wird erneut gerendert werden, wenn der Speicher aktualisiert wird.

Sie können dieses Muster auch so erweitern, wie Sie möchten, z. B. einen Zeitstempel anstelle eines booleschen Werts speichern und die Anforderung für eine bestimmte Zeitüberschreitung nicht ausführen.