javascript - 回流如何监听异步操作完成

Question

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

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

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

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

我是这样创建我的 Action 的:

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 不是一个函数，所以上面的代码将不起作用。什么是正确的做法？

Answer 1

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

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

应该是

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

我相信 React 中已经添加了未定义混合的警告，但显然还没有进入我的版本。

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

应该是

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

我改用了 createActions 中的语法。这就是为什么 loadProject.completed 不是一个函数。 Reflux 创造了一个简单的 Action ，没有明显的提示。

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