React Native - Navigieren nach einer asynchronen Aktion

Question

Ich entwickle eine mobile App mit React Native und Redux und ich stehe vor einem Softwaredesignproblem. Ich möchte eine REST-API (asynchrone Operation) für die Anmeldung aufrufen und zur Hauptansicht wechseln, wenn diese Operation erfolgreich war. Ich verwende Redux und Thunk, also habe ich bereits die asynchronen Aktionen implementiert, so dass mein Hauptbezweifelt ist: Wo sollte ich die Logik platzieren, um zur Hauptansicht zu navigieren?

Kann ich direkt aus einer Aktion auf das Navigatorobjekt zugreifen und die Navigation dort durchführen? Sollte ich das in der Login-Komponente tun? (Wie ich es schon mache - überprüfen Sie den Code unten).

componentWillReceiveProps(nextProps){ 
    if(nextProps.errorLoginMsg){ 
     Alert.alert("Login Failed", nextProps.errorLoginMsg); 
    } 
    else if(!nextProps.user.isNull()){ 
     this.props.navigator.replace({name: 'main'}); 
    } 
    } 

Ich bin nicht davon überzeugt, diese Logik in der Komponente zu haben. Scheint keine gute Übung zu sein. Gibt es einen anderen Weg, dies zu tun?

Dank

Answer 1

Dies ist eines der schwierigsten Probleme in reagieren nativen mit dem aktuellen Navigator API. Ich würde vorschlagen, einen Wegspeicher zu haben, der die gegenwärtige Route hält und die Komponente hat, die den mit diesem Speicher verbundenen Nautiker einschließt und eine Navigation hat, die auf componentWillReceiveProps ausgelöst wird. Hier

Answer 2

ist der Code, wie ich es tun:

   const resetAction = NavigationActions.reset({ 
        index : 0, 
        actions: [ 
         NavigationActions.navigate({ routeName: 'Home' }) 
        ] 
       }); 

       this.props.requestDeleteEvent({ 
        id: eventID 
       }).then(() => { 
        this.props.navigation.dispatch(resetAction); 
       }); 

Und innen Funktion requestDeleteEvent:

export function requestDeleteEvent(requestData) { 
    const id = requestData.id; 

    return (dispatch, getState) => { 
     return fetch(Config.event + id, { 
      method: 'DELETE', 
      headers: { 
       'Content-Type': 'application/json; charset=UTF-8', 
      }, 
     }) 
      .then((response) => getResponseJson(response)) 
      .then((responseJson) => { 
        if (responseJson.isSuccess) { 
         return dispatch(deleteEvent(id)); 
        } 
        else { 
         return dispatch(triggerToast({type: 'alert', content: ERROR})); 
        } 
       } 
      ); 
     } 
    }