Question

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_USER动作生成它的reducer处理这个

    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行动吗？所以当Alert窗口消失时，在redux store中清除sysAlert？我觉得这很复杂，有什么好主意吗？

Answer 1

我看到你正在使用来自React-Native的Alert。所以你可以做到：

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

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

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

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

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

1 个答案: