React-Redux-Initialisierungsfunktion unabhängig von Zustandsänderungen

Question

Ich weiß wirklich nicht, wie man so genau wie möglich beschreibt. Ich brauche eine Art von Initialisierungsfunktion nach einem asynchronen Aufruf, der nur einmal aufgerufen wird, unabhängig davon, ob der Status später geändert wird.

Ich habe eine Komponente, und wenn es besteigt ich machen async Anfrage Aktion Schöpfer mit einigen Standardwerte zu erhalten, auch nenne ich somethingElse() später, die meine UI wieder neu rendern macht, weil der Staat wurde aktualisiert:

Hier Aktion Schöpfer ist:

export function requestDefaults(){  
    return { 
    type:  REQUEST_DEFAULTS, 
    payload: axios.get(ROOT_URL), 
    }; 
} 

export function somethingElse(){  
    return { 
    type:  SOME_OTHER, 
    payload: "Whatever", 
    }; 
} 

und mein Minderer:

switch (action.type) { 
    case REQUEST_DEFAULTS: 
     return action.payload.data; 
     break; 

    case SOME_OTHER: 
     return action.payload; 
     break; 

    default: 
     return state; 
} 

In meiner Komponente - wenn es maunted ist ich async Anfrage machen und w enn ich erhalten Antwort, die ich UI sichtbar zu machen - in diesem vereinfachten Fall eine Schaltfläche, die somethingElse ruft:

componentDidMount(){ 
    this.props.requestDefaults(); 
} 


render(){ 
    // Have received async data show button - THIS NEEDS TO BE ONLY ONCE 
    if(this.props.defaults.data !== undefined){ 
    <a onClick={ this.props.someThingElse }>do it</a> 
    } 
} 

// REQUEST_DEFAULTS & SOME_OTHER 
function mapStateToProps({ defaults, someOther}){ 
    return { defaults, someOther} 
} 

Nun, wenn ich this.props.someThingElse die Änderungen werden dem Staat rufen und in meiner render() Funktion wird die Taste neu gerendert Nochmal, das ist das Problem - ich brauche es nur einmal zu rendern, wenn ich die asynchronen Daten erhalte. Aber jetzt wurde Zustand aktualisiert und render() erneut aufgerufen und weil jetzt habe ich meine this.props.defaults.data Taste wird neu gerendert wieder, aber ich muss es nur einmal nach später erste async Anruf und nicht, wenn Statusänderungen vorgenommen werden ...

Answer 1

Sie könnten die Methode sollteComponentUpdate verwenden und nur dann rendern, wenn die Standarddaten geändert wurden. In Ihrem Fall ändern sich die Standarddaten nur einmal (standardmäßig ist sie im nächsten Schritt leer und enthält einige Daten), so dass die Rendermethode nur einmal aufgerufen wird.

shouldComponentUpdate(nextProps, nextState) { 
    return this.props.defaults.data !== nextProps.this.props.defaults.data; 
}