当用Redux登录本机中登录失败时，如何向用户显示警报

Question

有LOGIN按钮，该按钮在组件中具有onPress = this.props.onPressLogin(this.state.email, this.state.password)。

onPressLogin直接称为Action Generator，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_USER动作生成了其还原器处理此操作，我会这样做

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

和组件，

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

这种方式看起来像是在工作，但我不确定正确的方法。警报之后，this.props.sysalert并不为空，因此每次组件移动所显示的空警报时。我不知道如何将默认设置为this.props.sysAlert。

我应该创建CLEAR_ALERT操作吗？因此，当警报窗口消失时，然后在Redux Store中清洁sysAlert？我认为这很复杂，还有更好的主意吗？

Answer 1

我看到您正在使用React-Native的警报。因此，您可以简单地做：

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

或如果要显示输入旁边的错误消息，则可以使用语法，例如：

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

由于您使用的是Redux Connect，它将自动更新this.props.error。在这种情况下，您也需要将状态映射到道具。