1

我正在为我的观点创建一个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;
}

最终发生的事情是我陷入了无限循环。我出去拿 my users，然后emits是一个 change 事件，然后onChange再次调用 my ，开始循环。这样做的正确方法是什么flux？其他人使用的模式是什么？

4

2 回答 2

2

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

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

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

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

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

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

然后 UsersList 组件将通过调用 UserStore.getUsers() 从存储中接收数据。

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

于 2014-08-26T19:43:29.877 回答
0

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

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

于 2014-08-25T02:12:03.653 回答