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

根据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;
    }
});

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

Answer 2

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

组件调用操作
动作处理程序将检索数据
数据到达后，操作将发送通知数据的事件
正在侦听活动的商店将收到数据
商店将发出更改事件
依赖于该商店的组件将更新

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

Fluxible非常清楚地解释了这一点：http://fluxible.io/api/actions.html

如何在通量中设置ajax数据获取？

2 个答案: