javascript - 如何在通量中设置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

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

从组件触发 View Action

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 中成功触发服务器 Action ，用数据分派(dispatch)一个事件

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

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