Determining whether a collection has loaded.

[adambrodzinski]

Determining whether a collection has loaded.

[AdamBrodzinski]

Hmmm, I haven't ran into this yet. However I rarely use the sub callbacks. Typically i've subscribed to the data and then dispatched a {CAMPAIGNS_LOADING: true} action. Then when the flux helper dispatches a 'changed' action I set the new data from minimongo and also flip the CAMPAIGNS_LOADING to false. Then my UI will get the loaded and data on the same event loop.

I'm not sure if this is the best way to do this but is how i've been typically using it. Does this help? If not let me know and perhaps we can work something else out.

[TimFletcher]

Ah, yes that absolutely helps. It never crossed my mind to dispatch an additional action for the loading state. So now I have an action creator that looks like this:

Actions.Campaigns = {
  campaignsChanged(newDocs) {
    return {
      type: 'CAMPAIGNS_COLLECTION_CHANGED',
      collection: newDocs,
    };
  },

  markLoading() {
    return {
      type: 'CAMPAIGNS_COLLECTION_LOADING',
    };
  },
};

And an associated reducer:

const initialState = {
  campaignsLoading: true,
  campaigns: [],
};

Reducers.campaigns = function campaigns(state = initialState, action) {
  switch (action.type) {

    case 'CAMPAIGNS_COLLECTION_CHANGED':
      return Object.assign({}, {
        campaignsLoading: false,
        campaigns: [...action.collection],
      });

    case 'CAMPAIGNS_COLLECTION_LOADING':
      return Object.assign({}, state, { campaignsLoading: true });

    default:
      return state;
  }
};

And I can simply use this in my component.

componentWillMount() {
  this.sub = Meteor.subscribe('campaigns');
  store.dispatch(Actions.Campaigns.markLoading());
},
componentWillUnmount() {
  this.sub.stop();
},

Thanks for the help!

[AdamBrodzinski]

No prob! 👍

Also you can cleanup the merge code by using spreads too, babel uses a Object.assign as a polyfill anyway:

case 'CAMPAIGNS_COLLECTION_LOADING':
  return {...state, campaignsLoading: true};

Also this may/may-not work depending on race conditions (which could be fixed with a startup wrap but is ugly):

const {dispatch} = store;
const {markLoading} = Actions.Campaigns

...

componentWillMount() {
  this.sub = Meteor.subscribe('campaigns');
  dispatch(markLoading());
},