React Native - Navigazione dopo un'azione asincrona

Question

Sto sviluppando un'applicazione mobile con React Native e Redux e sto affrontando un problema di progettazione software. Voglio chiamare un'API REST (operazione asincrona) per l'accesso e navigare alla vista principale se l'operazione è andata a buon fine. Sto usando redux e thunk quindi ho già implementato le azioni asincrone, quindi il mio dubbio principale è: dove devo mettere la logica per navigare nella vista principale?

Posso accedere all'oggetto navigatore direttamente da un'azione e eseguire la navigazione lì? Devo farlo nel componente di login? (Come sto già facendo - controlla il codice qui sotto).

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

Io non sono sicuro di avere quella logica nel componente. Non sembra una buona pratica. C'è un altro modo per farlo?

Grazie

Answer 1

Questo è uno dei problemi più difficili in reagiscono nativa con la corrente API Navigator. Vorrei suggerire di avere un archivio di percorsi che contiene il percorso corrente e avere il componente che include il Navigatore collegato a questo negozio e con una navigazione attivata su componentWillReceiveProps.

Answer 2

ecco il codice come lo faccio:

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

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

E funzione all'interno 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})); 
        } 
       } 
      ); 
     } 
    }