如何设置 ajax 数据获取不断变化？

Question

我正在开发我的第一个 FLUX 应用程序并偶然发现了这个问题。我想从服务器获取数据并将其传递给我的组件。

假设我有一个组件方法...

loadMore() {
  AppActions.getCards();
}

...还有一家商店：

$.ajax({
  url: '../data.json',
  dataType: "json",
  success: function (data) {
    // ???
  }.bind(this),
  error: function (xhr, status, err) {
    console.error(status, err.toString());
  }.bind(this)
});

不太清楚如何正确地做到这一点。 ajax里面this显然是undefined，也不能从中返回值，或者我可以吗？

很确定这是微不足道的，但非常感谢您的建议

Answer 1

在动作处理程序中执行。所以流程是：

• 组件调用动作
• 动作处理程序将检索数据
• 一旦数据到达，action 将发送一个事件通知数据
• 正在监听事件的商店将接收数据
• 商店将发出更改事件
• 依赖于该商店的组件将更新

在动作处理程序中，您可以调度开始加载数据的事件，以便更新存储状态和 UI。

Fluxible 解释的很清楚：http://fluxible.io/api/actions.html

Answer 2

根据Facebook flux-chat example，您可以执行以下操作：

从组件触发视图操作

loadMore() {
    AppViewActionCreators.getCards();
}

在 AppViewActionCreators 中调用 AppWebAPIUtils 方法

getCards() {
    AppWebAPIUtils.getCards();
}

在您的 AppWebAPIUtils 中进行 ajax 调用

getCards() {
    $.ajax({
        url: '../data.json',
        dataType: "json",
        success: function (data) {
            AppServerActionCreators.recieveCards(data);
        },
        error: function (xhr, status, err) {
            console.error(status, err.toString());
        }
    });
}

在 ServerActionCreators 中成功触发服务器操作，用数据调度事件

recieveCards(data) {
    AppDispatcher.dispatch({
        type: ActionTypes.RECIEVE_CARDS,
        data: data
    });
}

通过存储接收数据并发出更改事件

AppStore.dispatchToken = AppDispatcher.register(function (action) {
    switch (action.type) {
        case ActionTypes.RECIEVE_CARDS:
            _cards = action.data.cards;
            AppStore.emitChange();

            break;
    }
});

您应该有视图和服务器操作创建者来防止循环依赖。