Wie Alert für Benutzer angezeigt wird, wenn Login fehlgeschlagen in Reagieren nativ mit Redux

Question

Es gibt LOGIN Schaltfläche, die onPress = this.props.onPressLogin(this.state.email, this.state.password) in Komponente hat.

Die onPressLogin in-direkt genannten Aktion Generator, loginAct.

const mapDispatchToProps = (dispatch) => { 
    return { 
     onPressLogin: (email, password) => { 
      dispatch(loginAct(email, password)) 
     } 
    } 
}; 

Die loginAct ist eigentlich Art von Thunk, die Async-Funktion zurück und schließlich seine Rückrufaktion erzeugen.

exports.loginAct = (email, password) => { 
    return function (dispatch) { 
     return axios.post('http://10.0.2.2:3000/login', { email: email, password : password }) 
      .then((response) => { 
       if(response.data.result == 'success') { 
        dispatch(authUser(email)); 
       } else { 
        // I want to show alert to user. 
        dispatch(alertUser(response.data.message)); 
       } 
      }) 
      .catch(function (error) { 
       throw error; 
      }) 
    }; 
}; 


alertUser = (alert) => { 
    return { 
     type: 'ALERT_USER', 
     alert 
    } 
}; 

An diesem Punkt kann ich Benutzer nicht richtig warnen. Ist das richtig? Ich tun, wenn ALERT_USER Aktion seine Minderer generiert dieses

case 'ALERT_USER' : 
     return { 
      sysAlert : action.alert 
     }; 

Griff und in der Komponente,

if(this.props.sysAlert != ''){ 
     Alert.alert(
      'Alert title', 
      this.props.sysAlert) 
    } 

Auf diese Weise sieht aus wie Arbeit, aber ich bin nicht sicher, die richtige Art und Weise. Nach der Warnung ist this.props.sysAlert nicht leer, also jedes Mal, wenn die Komponente die leere Warnmeldung verschoben hat. Ich weiß nicht, wie man den Standard auf this.props.sysAlert setzt.

Sollte ich CLEAR_ALERT Aktion erstellen? Wenn also das Alert-Fenster verschwindet, dann reinige sysAlert in redux store? Es ist sehr kompliziert, denke ich. Jede bessere Idee?

Answer 1

Ich sehe, Sie verwenden Alert von React-Native. So können Sie tun einfach:

alertUser = (alert) => { 
    Alert.alert('Alert title', alert); 
    return { 
     type: 'ALERT_USER', 
     alert 
    } }; 

Oder wenn Sie die Fehlermeldung neben den Eingängen zeigen wollen, können Sie eine Syntax wie:

<Inputs /> 
{this.props.error && <ErrorMsg />} 

Da Sie redux verbinden verwenden es wird automatisch aktualisiert die this.props.error. In diesem Fall müssen Sie den Status auch den Requisiten zuordnen.