React-Redux KomponenteWillReceiveProps nicht ausgelöst mit API-Daten

Question

Ich bin mir nicht sicher, ob dies der richtige Weg ist, oder wenn es überhaupt möglich ist, daher meine Frage hier.

Ich benutze react-redux, redux-thunk, json-server (für Dummy-Daten) und Typoskript in meinem Projekt. Mit 1 API-Aufruf aktualisiere ich den "Datenreduzierer" mit allen Daten für meine Anwendung. Diese Daten werden zusammen mit anderen Reduzierern über combineReducers verwendet: Redux tree

Was ich tun möchte, ist data.labels als Prop in meine Komponente zu mappen. Sobald der gesamte API-Ruf beendet ist und data.labels daher gefüllt ist, möchte ich diese Daten meinem Front-End zeigen. Ich habe jedoch bemerkt, dass der componentWillReceiveProps überhaupt nicht ausgelöst wird, wenn mein Daten-API-Aufruf beendet ist. Es aktualisiert sich, wenn ich die gesamte 'Daten' Stütze an meine Komponente anschließe, anstatt 'data.labels'.

Reducer:

case Actions.RECEIVE: 
     return { 
      ...state, 
      labels: action.payload.labels, 
      defaultLinks: action.payload.defaultLinks, 
      customLinks: action.payload.customLinks 
     }; 

Komponente:

function mapStateToProps(state: any) { 
return { 
    labels: state.data.labels, // This will not trigger componentWillReceiveProps 

function mapStateToProps(state: any) { 
return { 
    data: state.data, // This will trigger componentWillReceiveProps 

Irgendwelche Tipps, wie dies ohne Injektion als Stütze den gesamten Datenobjekt zur Arbeit kommen?

bearbeiten

Im Falle te voll ‚Daten‘ verwenden, erhalte ich eine leere Reihe von Etiketten, wenn data.labels in componentWillReceiveProps anmelden, bevor die Daten abgerufen wurde. Nachdem die Daten erfolgreich abgerufen wurden, zeigt mein Protokoll ein Array mit x Anzahl der Labels an.

Im Folgenden sind die Schnittstellen I verwenden: Datenschnittstelle (Struktur innerhalb redux Shop mit 'Daten' als Elternteil):

interface Data { 
    labels: Label[]; 
    defaultLinks: DefaultLink[]; 
    customLinks: CustomLink[]; 
    request: boolean; 
    failure: boolean; 
} 

Schnittstelle Props in meiner Komponente:

interface Props { 
    labels: Label[]; 
    ...; // Other stuff 
} 

Answer 1

Sie kann für die Schaltmuster suchen: gist.github.com/abhiaiyer91/aaf6e325cf7fc5fd5ebc70192a1fa170 oft in Kombination mit Neuauswahl verwendet: github.com/reactjs/reselect#reselect

der Hauptvorteil Entkoppeln Sie die Form Ihres Staates von der Form Ihrer Requisiten.