javascript - react /回流如何进行正确的异步调用

Question

我最近开始学习 ReactJS，但我对异步调用感到困惑。

假设我有一个带有用户/密码字段和登录按钮的登录页面。组件看起来像:

var Login = React.createClass({

    getInitialState: function() {
        return {
            isLoggedIn: AuthStore.isLoggedIn()
        };
    },

    onLoginChange: function(loginState) {
        this.setState({
            isLoggedIn: loginState
        });
    },

    componentWillMount: function() {
        this.subscribe = AuthStore.listen(this.onLoginChange);
    },

    componentWillUnmount: function() {
        this.subscribe();
    },

    login: function(event) {
        event.preventDefault();
        var username = React.findDOMNode(this.refs.email).value;
        var password = React.findDOMNode(this.refs.password).value;
        AuthService.login(username, password).error(function(error) {
            console.log(error);
        });
    },

    render: function() {

        return (
                <form role="form">
                    <input type="text" ref="email" className="form-control" id="username" placeholder="Username" />
                    <input type="password" className="form-control" id="password" ref="password" placeholder="Password" />
                    <button type="submit" className="btn btn-default" onClick={this.login}>Submit</button>
                </form>
        );
    }
});

AuthService 看起来像:

module.exports = {
    login: function(email, password) {
        return JQuery.post('/api/auth/local/', {
            email: email,
            password: password
        }).success(this.sync.bind(this));
    },

    sync: function(obj) {
        this.syncUser(obj.token);
    },

    syncUser: function(jwt) {
        return JQuery.ajax({
            url: '/api/users/me',
            type: "GET",
            headers: {
                Authorization: 'Bearer ' + jwt
            },
            dataType: "json"
        }).success(function(data) {
            AuthActions.syncUserData(data, jwt);
        });
    }
};

Action :

var AuthActions = Reflux.createActions([
  'loginSuccess',
  'logoutSuccess',
  'syncUserData'
]);

module.exports = AuthActions;

并存储:

var AuthStore = Reflux.createStore({
    listenables: [AuthActions],

    init: function() {
        this.user = null;
        this.jwt = null;
    },

    onSyncUserData: function(user, jwt) {
        console.log(user, jwt);
        this.user = user;
        this.jwt = jwt;
        localStorage.setItem(TOKEN_KEY, jwt);
        this.trigger(user);
    },

    isLoggedIn: function() {
        return !!this.user;
    },

    getUser: function() {
        return this.user;
    },

    getToken: function() {
        return this.jwt;
    }
});

所以当我点击登录按钮时，流程如下:

Component -> AuthService -> AuthActions -> AuthStore

我直接使用 AuthService.login 调用 AuthService。

我的问题是我做得对吗？

我应该使用 action preEmit 并执行以下操作吗:

var ProductAPI = require('./ProductAPI')
var ProductActions = Reflux.createActions({
  'load',
  'loadComplete',
  'loadError'
})

ProductActions.load.preEmit = function () {
     ProductAPI.load()
          .then(ProductActions.loadComplete)
          .catch(ProductActions.loadError)
}

问题在于 preEmit 会使组件的回调变得更加复杂。我想学习正确的方法并找到使用 ReactJS/Reflux 堆栈放置后端调用的位置。

Answer 1

我也在使用 Reflux，并且我使用不同的方法进行异步调用。

在 vanilla Flux 中，异步调用放在操作中。

但在 Reflux 中，异步代码在商店中效果最好(至少在我看来是这样):

因此，特别是在您的情况下，我将创建一个名为“登录”的操作，该操作将由组件触发并由将启动登录过程的商店处理。一旦握手结束，商店将在组件中设置一个新状态，让它知道用户已登录。同时(例如，this.state.currentUser == null)组件可能会显示加载指示器。