2017-11-01 2 views
0

Ich arbeite an einer UserProfile Container-Komponente in reagieren, die einige Daten nach dem Abrufen von einem Server anzeigt.Dipatching einer Aktion vor MapStateToProps in React Redux

Dies ist die Komponente:

import React from 'react'; 
import {connect} from 'react-redux'; 
import PersonalInformationView from './PersonalInformationView'; 
import * as selectors from '../../../reducers'; 

    class PersonalInformationViewContainer extends React.Component{ 
     constructor(props, context){ 
      super(props, context); 

     } 

     render(){ 
      return (
        <PersonalInformationView userProfile={this.props.userProfile}/> 
      ); 
     } 

    } 


    const mapStateToProps = (state, ownProps) => { 
     return { 
      user: selectors.getUser(state), 
      userProfile: selectors.getUserProfile(state) 
     }; 
    }; 

    const mapDispatchToProps =() =>{ 
     return { 

     }; 
    }; 
    export default connect(mapStateToProps, mapDispatchToProps)(PersonalInformationViewContainer); 

Das Problem Im ist, dass ich die Aktion FETCH_USER_PROFILE_STARTED dipatch benötigen, die eine Saga ruft und bringt die Daten. Dies muss getan werden, bevor der Selektor getUserProfile aufgerufen wird, weil ich mit dem obigen Code ein undefiniertes Ergebnis erhalte.

Was ist der beste Weg, um sicherzustellen, dass ich die Daten abgerufen habe, so dass das props.userProfile in meiner Komponente nicht definiert ist?

Antwort

1

können Sie einfach

if (!this.props.userProfile) 
    return null; 

am Anfang Ihrer Methode machen hinzufügen, so dass die Komponente leer macht.

Oder rendern Sie einen Ladetext oder eine Animation anstelle von null, während Sie auf den Abruf warten.

Oder macht nicht die Komponente überhaupt durch den Test eines höhere Komponentenhierarchie setzen ...

Technisch Sie vermeiden, könnten die getUserProfile Wähler vor dem Abruf startet Aufruf aber dies würde zu einer unnötigen kompliziert am Ende , hässlicher, nicht wartbarer und unleserlicher Code ... Warum würdest du das tun?

Sie eigentlich wollen den Wähler anrufen und Sie wollen es undefined zurückzukehren, die die einfache Wahrheit ist ...

+0

Vielen Dank für Ihre Antwort. Nur noch eine Frage. Wo soll ich den Versand zum Abrufen des Benutzerprofils aufrufen? –

+0

Sie könnten zum Beispiel 'componentDidMount' verwenden, aber es hängt von Ihren Bedürfnissen ab. – Jalil

Verwandte Themen