回流如何监听异步操作完成答案

【问题标题】：Reflux how to listen for async action completed回流如何监听异步操作完成
【发布时间】：2015-04-20 22:09:03
【问题描述】：

通过阅读文档，我不太了解 Reflux 异步操作的工作原理。特别是当异步操作完成时，我需要触发一些东西。

在我的一个组件中，我想监听一个异步操作完成，然后转换到一个视图。

mixins: [State, Navigation, Reflux.listenerMixin],

componentDidMount() {
  this.listenTo(actions.loadProject.completed, ()=>{this.transitionTo('info')});
},

我已经创建了这样的操作：

var actions = Reflux.createActions([
  "someSyncAction",
  "anotherSyncAction"
]);

actions.loadProject = Reflux.createAction({
  "loadProject": {children: ['completed','failed']},
});

在我的 projectStore 我有这样的东西：

 onLoadProject(id) {

    var url = '/api/projects/' + id;
    io.socket.get(url, (body, jwr) => {

      if(jwr.statusCode !== 200){
        console.error('Failed to load project', id, body);
        return actions.loadProject.failed();
      }

      var p = body;
      debug('loaded project', id, p);
      this.project = p;
      this.trigger(p);
      actions.loadProject.completed();
    });
  },

但是看起来actions.loadProject.completed 不是一个函数，所以上面的代码是行不通的。正确的做法是什么？

【问题讨论】：

标签： javascript reactjs refluxjs

【解决方案1】：

我自己是 Reflux 的新手，这是我整理的一个演示。不确定它是否 100% 正确，但可能会对您有所帮助 - http://jsbin.com/roqito/2/edit

【讨论】：

感谢@Tim Arney，从您的代码中我能够找出我的问题所在。原来我离得不远了……
这里有一些你可能会发现有用的信息github.com/spoike/refluxjs/issues/194 && spoike.ghost.io/refluxjs-0-1-8 一些关于使用preEmit ProductActions.load.preEmit = function () { // Perform the API call };
感谢您的链接！有用的信息。我希望文档中的 0.1.8 文章有更多内容。
这个例子很容易阅读。我事先对 Reflux 有所了解，但是通过这个示例，开始实际使用它非常容易。

【解决方案2】：

我发现我的原始代码因为一个错字和一个错误而无法运行。以下是更正。

mixins: [State, Navigation, Reflux.listenerMixin],

应该是

mixins: [State, Navigation, Reflux.ListenerMixin],

我相信未定义的 mixin 的警告已添加到 React，但显然还没有进入我的版本。

actions.loadProject = Reflux.createAction({
 "loadProject": {children: ['completed','failed']},
});

应该是

actions.loadProject = Reflux.createAction({children: ['completed','failed']});

我改用了 createActions 中的语法。这就是 loadProject.completed 不是函数的原因。 Reflux 创造了一个简单的动作，没有明显的抱怨。

在 Tim Arney 的示例中，您可以将 API 调用保存在单独的操作侦听器中，并让商店仅侦听已完成的操作。我想我更喜欢将 API 调用与存储逻辑保持一致。如果有人认为有充分的理由不这样做，我很乐意听到。

【讨论】：

我已经阅读了多篇关于在何处放置 API 调用的帖子和讨论。基于这些讨论，我倾向于在动作创建者（使用 preEmit）中进行“获取”调用，并在商店中进行发布/放置调用。第一个可以让您的商店保持清洁，而后者可以更轻松地响应呼叫的不同结果。

【解决方案3】：

来自docs：

// Create async action with `completed` & `failed` children 
var makeRequest = Reflux.createAction({ asyncResult: true });

【讨论】：