IT技术 - React+Flux：通知视图/组件操作失败？ - 吾爱随笔录

我正在编写一个注册表组件。当表单提交时，它会触发创建用户操作。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 未能创建新用户，以便它可以向用户呈现错误消息。

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