Javascript 反应+;通量:通知视图/组件操作已失败?

Javascript 反应+;通量:通知视图/组件操作已失败?,javascript,ajax,reactjs,flux,Javascript,Ajax,Reactjs,Flux,我正在写一份登记表。表单提交时会触发创建用户操作。createUser操作通过ajax api调用创建新用户。如果用户已存在,则触发的用户操作将失败。我们知道我们不能从ajax调用返回响应,我们需要回调。如何告诉组件用户已经存在 // Register From Component var Register = React.createClass({ saveUser : function(event){ event.preventDefault();

我正在写一份登记表。表单提交时会触发创建用户操作。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
        });
    }
};

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

使用承诺帮助我处理异步成功/错误处理。我们可以修改
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));
    }
};
// 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));
    }
};