回流如何监听异步动作完成

Question

From reading the docs I don't quite understand how Reflux async actions work. In particular I need to trigger something when an async action completes.

In one of my components I want to listen for an async action complete and then transition to a view.

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

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

I have created my action like this:

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

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

And in my projectStore I have something like this:

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

But it appears actions.loadProject.completed is not a function, so the above code won't work. What is the correct approach?

Answer 1

I found that my original code didn't work because of one typo and one mistake. Below are the corrections.

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

Should have been

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

I believe warnings for undefined mixins have been added to React, but apparently didn't make it into my version yet.

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

Should have been

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

I had used the syntax from createAction s instead. That's why loadProject.completed wasn't a function. Reflux created a plain action without complaining apparently.

In Tim Arney's example shows that you can keep the API call in a separate action listener and have the store only listen for the completed action. I think I prefer to keep the API call with the store logic. If anyone thinks there's a good reason not to I'd love to hear about it.

Answer 2

I'm new to Reflux myself, here's a demo I put together. Not sure if it's 100% proper but might help you - http://jsbin.com/roqito/2/edit

Answer 3

From docs :

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