javascript - 使用通量架构在 reactjs 中获取数据的正确模式是什么？

Question

我正在为我的观点创建一个带有 react 的 flux 应用程序。这是我的 View 代码

function getUsers() {
  return {
    users: UserStore.getUsers()
  };
}

var UsersList = React.createClass({
    getInitialState: function() {
        return getUsers();
    },
    componentDidMount: function() {
        UserStore.addChangeListener(this.onChange);
    },
    onChange: function() {
        this.setState(getUsers());
    },
    render: function() {
        ...
    }
});

module.exports = UsersList;

我的 getUsers 发生在我的商店中。这是代码:

getUsers: function() {
    var that = this;
    $.ajax({
        url: 'http://localhost:9000/users',
    }).success(function(data) {
        users = data.users;
        that.emit(CHANGE_EVENT);
    });
    return users;
}

最终发生的事情是我陷入了无限循环。我出去获取我的 users，然后它 发出 一个更改事件，然后再次调用我的 onChange，从而开始循环。使用 flux 执行此操作的正确方法是什么？其他人使用的模式是什么？

Answer 1

从存储中检索数据的行为不应触发从服务器中再次检索数据。

我会尝试将您的用户存储在本地商店中，并将您的 ajax 调用放入一个单独的 WebAPIUtils 模块中，您可以从操作创建者方法中调用该模块。

所以在这种情况下，商店中的 getUsers() 从商店内部的私有(private) _users 集合中检索数据。 WebAPIUtils.getUsers() 方法将从服务器调用数据。

在 AppBootstrap 模块中，您可以这样做:

// create an INIT action
ActionCreators.initialize(WebAPIUtils.getUsers());

UserStore 将通过初始化 _users 集合和发出“更改”来响应 INIT。

然后，UsersList 组件将通过调用 UserStore.getUsers() 从商店接收数据。

在某些时候，某人(通过单击提交按钮)或某物(如计时器)会调用新数据。