如何设置 ajax flux 数据获取？

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，也不能从中得到 return 值，或者我可以吗？

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

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());
        }
    });
}

成功触发 ServerActionCreator 中的服务器操作，使用数据调度事件

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

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

如何设置 ajax flux 数据获取？

how to set ajax data fetching in flux?

javascript

flux

reactjs

reactjs-flux