React+Flux：通知视图/组件操作失败？

Posted 2023-02-22

【中文标题】React+Flux：通知视图/组件操作失败？

【英文标题】：React+Flux: Notify View/Component that action has failed?

【发布时间】：2016-06-27 00:38:47

【问题描述】：

我正在编写一个注册表组件。当表单提交时，它会触发创建用户操作。 createUser 操作通过 ajax api 调用创建一个新用户。如果用户已存在，则触发的用户操作将失败。我们知道我们不能从 ajax 调用返回响应，我们需要一个回调。我如何告诉我一个用户已经存在的组件？

// Register From Component
var Register    =   React.createClass(
    saveUser : function(event)
        event.preventDefault();
        userActions.createUser(this.state.user);
    ,

    render : function()
        return (
            <div className="register-form">
                message
                <RegisterForm
                    user=this.state.user
                    onChange=this.saveUserState
                    onSave=this.saveUser
                    errors=this.state.errors />
            </div>
        );
    
);

// Api Ajax call
module.exports = 
    saveUser : function(user) 
        $.ajax(
            type : 'POST',
            data : 
                email : user.email,
                password : user.password
            ,
            success: function(res)

            
        );
    ,
;

// Actions
var UserActions = 
    createUser : function(user)
        var newUser = UserApi.saveUser(user);

        Dispatcher.dispatch(
            actionType : ActionTypes.CREATE_USER,
            user : newUser
        );
    
;

我正在考虑从 createUser 方法返回一个布尔值。

...
onSave : function(event)

    if(userActions.createUser(this.state.user))
         // 
    

...

但是我们无法从 ajax 请求返回值，我如何通知我的组件 api 未能创建新用户，以便它可以向用户呈现错误消息。

【参考方案1】：

使用 Promises 帮助我处理异步成功/错误处理。我们可以修改createUser 操作以（稍后）根据用户是否正确保存来触发成功/失败操作：

// Actions
var UserActions = 
    userCreated : function(user) 
        Dispatcher.dispatch(
            actionType : ActionTypes.CREATE_USER,
            user : user
        );
    ,

    createUserFailed : function() 
        Dispatcher.dispatch(
            actionType : ActionTypes.CREATE_USER_FAILED
        );
    ,

    createUser : function(user) 
        // You should update the saveUser method to return a Promise that
        // resolves the new user on success and rejects on failure
        // (ie if the user already exists). Alternatively, you could update
        // this function to accept success/error callbacks.
        UserApi.saveUser(user)
            .then(this.userCreated.bind(this))
            .catch(this.createUserFailure.bind(this));
    
;