Question

我正在使用flux创建一个react个应用来查看我的观看次数。这是我的观点代码

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，然后emits更改事件，然后再次调用我的onChange，开始循环。使用flux做到这一点的正确方法是什么？其他人使用的模式是什么？

Answer 1

从商店检索数据的行为不应该触发从服务器再次检索数据。

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

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

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

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

UserStore会通过初始化_users集合和发出'更改'来响应INIT。

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

在某些时候，有人（通过点击提交按钮）或某事（如计时器）会要求新数据。

Answer 2

我遇到了同样的问题。希望React团队更新TodoMVC教程，以显示当页面加载时已存在待办事项时应用程序如何工作。

我希望有更合适的处理方法，但在我看到之前，我处理它的方法是在Store中添加一个标志，检查_users是否为空，如果是，只发送return数据而不发出更改事件。

使用flux架构获取反应数据的正确模式是什么？

2 个答案: