Why doesn't the Reflux.js listenAndPromise helper work?

Question

I'm using qwest to query my endpoint as shown below, the onGetResourceCompleted handler fires as expected but data is undefined. Why?

var Actions = Reflux.createActions({
  'getResource': { asyncResult: true }
});

Actions.getResource.listenAndPromise(function (id) {
  return qwest.get('http://localhost:8000/my-data/'+id, null, { withCredentials: true });
});


var MyStore = Reflux.createStore({

  listenables: Actions,

  init: function () {
    Actions.getResource('');
  },

  onGetResourceCompleted: function (data) {
    console.log('OK', data); // Get's called but data is undefined. Why?
  }

});

I can see the data loads correctly by looking at dev tools as well as calling qwest in isolation by simply doing:

qwest.get('http://localhost:8000/my-data/'+id, null, { withCredentials: true }).then(function(data) {
  console.log('OK', data);
});

Also doing the following works:

ServiceActions.getResource.listen(function (id) {
  ServiceActions.getResource.promise(
    qwest.get('http://localhost:8000/my-data/'+id, null, { withCredentials: true })
  );
});

What does your qwest.get(...) look like? Does it return a promise and use 'resolve' and 'reject' callbacks? — Björn Boxstart, Jul 02 '15 at 13:36
What version of RefluxJS are you using? I can use `listenAndPromise` with v0.2.8 (using [`superagent-bluebird-promise`](https://github.com/KyleAMathews/superagent-bluebird-promise)). — Jeff Fairley, Jul 09 '15 at 16:53
I'm using v0.2.8. It appears reflux simply doesn't work consistently with qwest. It's strange that listenAndPromise doesn't work but promise does when using qwest promises. I can get it working by wrapping qwest with a Q promise (https://github.com/kriskowal/q) but I'm not entirely happy with this solution just to get it to work with reflux. I'm open to suggestions on an Ajax promise library that works with reflux without hacks. — Will, Jul 11 '15 at 10:38
Have you checked out `axios`? See the section I linked for its cheetsheat: https://www.npmjs.com/package/axios#request-api? — wle8300.com, Jul 21 '15 at 18:28

score 0 · Answer 1 · answered Jul 24 '15 at 09:51

I've put some comments on the cause of this "confirmed bug" in the original issue you opened at github.com/spoike/refluxjs.

So, though you are using the reflux features the way they are intended, and they're definitely creating a race condition without even returning the race results, I think you're in luck. It turns out the two particular features you're using in this combination with this type of request is a bit redundant when you already have a promise available. I'd recommend you just drop the onGetRequestCompleted handler entirely, and handle completion using the standard promise ways of handling resolved promises, which honestly will give you more flexibility anyways.

For example:

var MyStore = Reflux.createStore({

  listenables: Actions,

  init: function () {
    Actions.getResource('')
      .then()  <-- this eliminates the need for onGetResourceCompleted
      .catch() <-- or this instead/in addition
      .finally() <-- or this instead/in additon
  },

  // no more onGetResourceCompleted

});

Why doesn't the Reflux.js listenAndPromise helper work?

1 Answers1