Reactjs 如何在React native with redux中登录失败时向用户显示警报

组件中有

LOGIN

按钮，该按钮具有

onPress=this.props.onPressLogin（this.state.email，this.state.password）

直接调用动作生成器中的

onPressLogin

，

loginAct

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

loginAct

实际上是一种thunk，它返回异步函数并最终返回其回调生成操作

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
    }
};

此时，我不知道如何正确地提醒用户。这是正确的方式吗？如果

ALERT\u用户

操作生成它的减速机来处理这个问题，我就会这样做

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

在成分上,

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

这种方法看起来很有效，但我不确定是否正确。警报后，this.props.sysAlert不是空的，因此每次组件移动时都会显示空警报。我不知道如何将默认设置为

this.props.sysAlert

---

我是否应该创建

清除\u警报

操作？那么，当警报窗口消失时，是否在redux存储中清除

sysAlert

？我想这很复杂，有更好的主意吗

我看到您正在使用React Native的警报。因此，您可以简单地执行以下操作：

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

或者，如果要在输入旁边显示错误消息，可以使用以下语法：

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

{this.props.error&&}

由于您正在使用redux connect，它将自动更新

this.props.error

。在这种情况下，您还需要将状态映射到道具