These are chat archives for reflux/refluxjs

30th
Apr 2015
Bartek Ciszkowski
@bartek
Apr 30 2015 14:55
Heya, is anyone around? I'm very curious about how to properly integrate Ajax calls within my Reflux workflow.
Think I figured it out based on some previous chat here :)
Matt Wean
@mwean
Apr 30 2015 18:16
Would it make sense for a store to have an object like { data: [...], errors: [...], otherStuff: [...] }?
Joel Hawksley
@joelhawksley
Apr 30 2015 18:17
that's how we do it
Matt Wean
@mwean
Apr 30 2015 18:17
and then the whole object gets pushed out on each trigger?
Joel Hawksley
@joelhawksley
Apr 30 2015 18:17
var ContentStore = Reflux.createStore({
  listenables: ContentActions,

  data: {},
onLoad: function() {
    this.data.redacted = null;
    this.data.loadError = null;
    this.trigger(this.data);
  },
onLoadCompleted: function(res, textStatus, jqXHR) {
    this.data.redacted = res.redacted;
    this.data.loadError = res.error;
    this.data.count = res.count;
    this.trigger(this.data);
  },
Matt Wean
@mwean
Apr 30 2015 18:19
awesome, thanks!
Joel Hawksley
@joelhawksley
Apr 30 2015 18:19
no problem!
Matt Wean
@mwean
Apr 30 2015 18:19
Where does the actual request get made?
Joel Hawksley
@joelhawksley
Apr 30 2015 18:20
man, I wish I could just share my whole app so you could see how it's wired
it's private client work unfortunately
Matt Wean
@mwean
Apr 30 2015 18:20
This is what I'm doing
Joel Hawksley
@joelhawksley
Apr 30 2015 18:20
but let me get you a redacted copy of the request block
Matt Wean
@mwean
Apr 30 2015 18:20
onLoad: function() {
  var request = $.ajax({
    url: '/transactions',
    contentType: 'json'
  });

  request.then((data) => {
    this.transactions = data.transactions;
    this.trigger(this.transactions);
  });
}
Joel Hawksley
@joelhawksley
Apr 30 2015 18:20
that's essentially how I do it
Matt Wean
@mwean
Apr 30 2015 18:21
I don't understand the purpose of the onLoadCompleted
Joel Hawksley
@joelhawksley
Apr 30 2015 18:22
we're using the built-in child actions in reflux
let me get you a more complete example
actions
var ContentActions = Reflux.createActions({
  "load": { children: ['completed', 'failed'] },
});
ContentActions.load.listenAndPromise( function() {
  return $.ajax({
    type: "POST",
    url: endpoint
  });
});
Matt Wean
@mwean
Apr 30 2015 18:24
interesting
is that the accepted practice to put the request in the action?
Joel Hawksley
@joelhawksley
Apr 30 2015 18:24
then, since it's using listenAndPromise, the child methods are called based on the result of the promise
haha, i wouldn't call anything I show you "accepted practice" per se
we're still figuring this all out ourselves
Matt Wean
@mwean
Apr 30 2015 18:24
yeah
sounds good
Joel Hawksley
@joelhawksley
Apr 30 2015 18:25
but i'm offering you examples of code we're about to deploy next week
which is something
Matt Wean
@mwean
Apr 30 2015 18:25
yeah that's great
Joel Hawksley
@joelhawksley
Apr 30 2015 18:25
I really should just redact this app and provide it as an example
it was tough for us to get it up and running due to the lack of full-stack reflux examples online
Matt Wean
@mwean
Apr 30 2015 18:27
yeah exactly
Joel Hawksley
@joelhawksley
Apr 30 2015 18:27
but if you can't get unblocked, let me know
Matt Wean
@mwean
Apr 30 2015 18:27
great, thanks!
Joel Hawksley
@joelhawksley
Apr 30 2015 18:27
because i have a fairly simple app working right in front of me, so i can at least help get you that far
Matt Wean
@mwean
Apr 30 2015 18:28
Do you happen to have an example of loading data with ajax in getInitialState?
Joel Hawksley
@joelhawksley
Apr 30 2015 18:28
ah, i would recommend against that
we went down that road
Matt Wean
@mwean
Apr 30 2015 18:28
ok
Joel Hawksley
@joelhawksley
Apr 30 2015 18:28
let me grab you some more code
Matt Wean
@mwean
Apr 30 2015 18:28
haha awesome
Joel Hawksley
@joelhawksley
Apr 30 2015 18:29
var ContentStore = Reflux.createStore({
  listenables: ContentActions,

  data: {},

  init: function() {
    ContentActions.loadReview();
  },
so on init, NOT getinitialstate, we call loadReview
init is called once, getInitialState is called EACH time the store is connected to
Matt Wean
@mwean
Apr 30 2015 18:29
ah, ok
so you don't have to load in your component, right?
Joel Hawksley
@joelhawksley
Apr 30 2015 18:30
nope
that's the point of stores
they should encapsulate state storage and manipulation
in our experience, only your root component should connect to the store
the rest can be passed the data they need
Matt Wean
@mwean
Apr 30 2015 18:33
awesome
thanks again
Joel Hawksley
@joelhawksley
Apr 30 2015 18:33
no problem
i'm going to push to get a redacted version of what we're building out on our agency's blog, it seems like it would be a huge help
Matt Wean
@mwean
Apr 30 2015 18:34
that would be amazing
good luck!
Joel Hawksley
@joelhawksley
Apr 30 2015 18:34
thanks!